THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML canvas lineTo() Method

❮ Canvas Object

Example

Begin a path, move to position 0,0. Create a line to position 300,150:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

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

Browser Support

The numbers in the table specify the first browser version that fully supports the method.

Method
lineTo() 4.0 9.0 3.6 4.0 10.1

Definition and Usage

The lineTo() method adds a new point and creates a line from that point to the last specified point in the canvas (this method does not draw the line).

Tip: Use the stroke() method to actually draw the path on the canvas.

JavaScript syntax: context.lineTo(x,y);

Parameter Values

Parameter Description Play it
x The x-coordinate of where to create the line to Play it »
y The y-coordinate of where to create the line to Play it »

More Examples

Example

Draw a path, shaped as the letter L:

YourbrowserdoesnotsupporttheHTMLcanvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.stroke();
Try it Yourself »


❮ Canvas Object