The CanvasRenderingContext2D
method lineTo()
, part of the Canvas 2D API, adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y)
coordinates.
Like other methods that modify the current path, this method does not directly render anything. To draw the path onto a canvas, you can use the fill()
or stroke()
methods.
Syntax
ctx.lineTo(x, y);
Parameters
x
- The x-axis coordinate of the line's end point.
y
- The y-axis coordinate of the line's end point.
Return value
Examples
Drawing a straight line
This example draws a straight line using the lineTo()
method.
HTML
<canvas id="canvas"></canvas>
JavaScript
The line begins at (30, 50) and ends at (150, 100).
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.beginPath(); // Start a new path ctx.moveTo(30, 50); // Move the pen to (30, 50) ctx.lineTo(150, 100); // Draw a line to (150, 100) ctx.stroke(); // Render the path
Result
Drawing connected lines
Each call of lineTo()
(and similar methods) automatically adds to the current sub-path, which means that all the lines will all be stroked or filled together. This example draws a letter 'M' with a single contiguous line.
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.moveTo(90, 130);
ctx.lineTo(95, 25);
ctx.lineTo(150, 80);
ctx.lineTo(205, 25);
ctx.lineTo(210, 130);
ctx.lineWidth = 15;
ctx.stroke();
Result
Specifications
Specification | Status | Comment |
HTML Living StandardThe definition of 'CanvasRenderingContext2D.lineTo' in that specification. | Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
lineTo
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 1.5 |
IE
Full support 9 |
Opera
Full support 11.6 |
Safari
Full support 2 |
WebView Android
Full support 1 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 12 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
See also
- The interface defining this method:
CanvasRenderingContext2D
CanvasRenderingContext2D.moveTo()
CanvasRenderingContext2D.stroke()
CanvasRenderingContext2D.lineTo() by Mozilla Contributors is licensed under CC-BY-SA 2.5.