HTML5 Canvas Reference - lineTo()

The lineTo() method adds a new point and draws a line from the new added to the last specified point.

After adding the point, we can call the stroke() method to draw the path on the canvas.

Browser compatibility


`lineTo()`	Yes	Yes	Yes	Yes	Yes

JavaScript syntax

context.lineTo(x,y);

Parameter Values

Parameter	Description
x	The x-coordinate to create the line
y	The y-coordinate to create the line

Example

The following code starts a path, then moves to position 0,0. After that it creates a line to position 300,150:


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<!-- ww  w  .j ava2s .  co m-->
<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);
ctx.stroke();

</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code connects lines to create a shape.


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="150"></canvas>
<script>
   canvas  = document.getElementById("myCanvas"); 
   ctx = canvas.getContext("2d");
    ctx.moveTo(  0,   0);<!--  ww w .j  av a  2s  . c  o m-->
    ctx.lineTo(200,   0);
    ctx.lineTo(200, 200);
    ctx.lineTo(  0, 200);
    ctx.lineTo(  0,   0);
    ctx.moveTo(100, 100);
    ctx.lineTo(100, 300);
    ctx.lineTo(300, 300);
    ctx.lineTo(300, 100);
    ctx.lineTo(100, 100);
    ctx.fill();
</script>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to create sin curve.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
    var canvas= document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
<!--   w w w.j av a 2s  .  com-->
    var amp = 80;
    var totalPeriod = Math.PI * 4;
    ctx.beginPath();
    ctx.moveTo(0, canvas.height / 2);
    for (var i = 0; i < canvas.width; ++i) {
        ctx.lineTo(i, canvas.height / 2 + amp * Math.sin(i / canvas.width * totalPeriod));
    }
    ctx.stroke();

</script>
</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to draw a triangle facing right.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
    var c= document.getElementById('canvas');
<!--from w  w  w . ja  v a  2s. c o  m-->
    context=c.getContext('2d');

     var width = 125;  // Triangle Width
     var height = 45; // Triangle Height
     var padding = 5;
     // Draw a path
     context.beginPath();
     context.moveTo(padding + width-125, height + padding);  // Top Corner
     context.lineTo(padding + width-90,height-17 + padding); // point
     context.lineTo(padding, height-35 + padding);           // Bottom Left
     context.closePath();
     // Fill the path
     context.fillStyle = "#9ea7b8";
     context.fill();

</script>
</body>
</html>

The code above is rendered as follows:

Example 5

The following code shows how to draw a vector.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
    var canvas= document.getElementById('canvas');
<!-- w ww. j  a va  2  s  . co m-->
var ctx = canvas.getContext("2d");
var x1 = 50;
var y1 = 50;
var x2 = 100;
var y2 = 125;
var x3 = 250;
var y3 = 95;
var angle = degreeAngle(x1, y1, x2, y2, x3, y3);
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.stroke();
endingArrow(x2, y2, x3, y3);
ctx.font = "18px Verdana";
ctx.fillText(angle + " degrees", 40, 200);
function degreeAngle(x1, y1, x2, y2, x3, y3) {
    var theta1 = Math.atan2((y1 - y2), (x1 - x2));
    var theta2 = Math.atan2((y3 - y2), (x3 - x2));
    return (((theta2 - theta1) * 180 / Math.PI).toFixed(2));
}
function endingArrow(x, y, xx, yy) {
    var endRadians = Math.atan((yy - y) / (xx - x));
    endRadians += ((xx > x) ? 90 : -90) * Math.PI / 180;
    ctx.save();
    ctx.beginPath();
    ctx.translate(xx, yy);
    ctx.rotate(endRadians);
    ctx.moveTo(0, 0);
    ctx.lineTo(8, 20);
    ctx.lineTo(-8, 20);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
}

</script>
</body>
</html>

The code above is rendered as follows: