Skip to main content
lineTo method

Adds a new point to a subpath and connects that point to the last point in the subpath by using a straight line.

HTML Canvas 2D Context, Section 9 Internet Explorer 9



CanvasRenderingContext2D.lineTo(x, y);


x [in]

Type: number

The x-coordinate, in pixels.

y [in]

Type: number

The y-coordinate, in pixels.

Return value

This method does not return a value.

Standards information


The following code example uses the moveTo and lineTo methods to incrementally draw horizontal lines across the canvas.

  <title>Lineto example</title>
  <script type="text/javascript">
      function draw() {
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              var ctx = canvas.getContext("2d");
              for (i = 10; i < 500; i += 20) {
                  ctx.moveTo(0, i);
                  ctx.lineTo(canvas.width, i);
<body onload="draw()">
  <canvas id="MyCanvas" width="600" height="600">This browser or document mode doesn't support canvas</canvas> 

See also