TheCanvasRenderingContext2D methodlineTo(), part of the Canvas 2D API, adds a straight lineto 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 renderanything. To draw the path onto a canvas, you can use thefill() orstroke() methods.

Syntax

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

None (undefined).

Examples

Drawing a straight line

This example draws a straight line using thelineTo() method.

HTML

<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 pathctx.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 oflineTo() (and similar methods) automatically adds to thecurrent 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></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

Browser compatibility

See also

• The interface defining this method:CanvasRenderingContext2D
• CanvasRenderingContext2D.moveTo()
• CanvasRenderingContext2D.stroke()