Canvas lineTo(): Draw Straight Lines Between Points
The Canvas lineTo(x, y) method adds a straight line segment from the current point to the coordinates you provide. It changes the current path, but the line does not become visible until you render the path, usually with stroke().
For a predictable starting point, use moveTo() before the first lineTo(). Additional lineTo() calls continue from the previous endpoint, making it easy to build connected lines and polygons.
Basic lineTo() example Top ↑
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20, 30);
ctx.lineTo(320, 150);
ctx.stroke();
</script>lineTo() syntax and coordinates Top ↑
ctx.lineTo(x, y);| Parameter | Meaning |
|---|---|
x | Horizontal coordinate of the line's endpoint, measured from the left edge of the Canvas in the default coordinate system. |
y | Vertical coordinate of the endpoint, measured from the top edge in the default coordinate system. |
lineTo() returns undefined. It adds the segment to the current subpath; it does not paint the segment by itself.
Interactive lineTo() demo Top ↑
Move the X and Y controls to change the endpoint passed to lineTo(). The starting point remains fixed at (20, 30).
The demo redraws the path whenever a range control changes.
Drawing connected lines Top ↑
Each new lineTo() call starts from the current point left by the previous path command. This creates one connected subpath.
ctx.beginPath();
ctx.moveTo(30, 150);
ctx.lineTo(100, 40);
ctx.lineTo(180, 120);
ctx.lineTo(260, 50);
ctx.stroke();You do not need a separate stroke() after every segment. Build the path first, then render it once when the segments share the same styling.
lineTo() vs moveTo() Top ↑
| Method | Effect on the path |
|---|---|
moveTo(x, y) | Starts a new subpath at a new position without adding a connecting line. |
lineTo(x, y) | Adds a straight segment from the current point to the new endpoint. |
Use moveTo() when you want a disconnected starting point. Use lineTo() when the points should be connected.
Building and closing a shape Top ↑
Multiple lineTo() calls can define a polygon. Use closePath() when you want to connect the current point back to the beginning of the current subpath.
ctx.beginPath();
ctx.moveTo(100, 20);
ctx.lineTo(180, 150);
ctx.lineTo(20, 150);
ctx.closePath();
ctx.stroke();Styling lines Top ↑
lineTo() defines geometry. The appearance of the rendered line comes from Canvas stroke properties such as lineWidth, strokeStyle, lineCap, lineJoin, and setLineDash().
ctx.beginPath();
ctx.moveTo(30, 60);
ctx.lineTo(320, 60);
ctx.lineWidth = 8;
ctx.strokeStyle = '#3366cc';
ctx.lineCap = 'round';
ctx.stroke();Common lineTo() mistakes Top ↑
- Expecting
lineTo()itself to make a visible line; callstroke()orfill()to render the path. - Forgetting to establish the intended starting point with
moveTo(). - Calling
beginPath()between every connected segment, which breaks the path into separate drawing operations. - Forgetting that each endpoint becomes the starting point for the next connected segment.
- Confusing path geometry with styling. Use stroke properties to control color, width, caps, joins, and dash patterns.
Accessibility note Top ↑
Canvas lines are pixels and do not provide semantic meaning by themselves. If a line drawing, chart, or diagram communicates information, provide an equivalent text or HTML representation so users do not need to interpret the Canvas alone.
Frequently asked questions Top ↑
What does lineTo() do in Canvas? Top ↑
It adds a straight segment from the current point in the current subpath to the X and Y coordinates you specify.
Why is my lineTo() line not visible? Top ↑
lineTo() only changes the path. Call stroke() to draw its outline or use an appropriate fill operation for a closed shape.
Do I need moveTo() before lineTo()? Top ↑
Using moveTo() is the clearest way to set the intended starting point before adding the first straight segment.
Can I use several lineTo() calls together? Top ↑
Yes. Each endpoint becomes the current point, so subsequent calls create connected segments in the same subpath.
How do I change the color or thickness of a line? Top ↑
Set properties such as strokeStyle and lineWidth before calling stroke().
Related Canvas tutorials Top ↑
Canvas tutorial | moveTo() | closePath() | lineWidth | lineCap | lineJoin | strokeStyle
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
