Canvas moveTo(): Set the Starting Point of a Path
The Canvas moveTo(x, y) method starts a new subpath at the specified coordinates. It changes the current drawing position without drawing a visible line.
A common pattern is beginPath() → moveTo() → lineTo() → stroke(). Think of moveTo() as lifting a pen and placing it at a new starting point.
Basic moveTo() 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(360, 160);
ctx.stroke();
</script>moveTo() syntax and coordinates Top ↑
ctx.moveTo(x, y);| Parameter | Meaning |
|---|---|
x | Horizontal coordinate measured from the left edge of the Canvas. |
y | Vertical coordinate measured from the top edge of the Canvas. |
With the default coordinate system, X increases to the right and Y increases downward. moveTo() returns undefined.
Interactive moveTo() demo Top ↑
Move the X and Y controls to change only the starting point. The ending point stays fixed at (360, 180).
Changing the controls calls moveTo(x, y) before drawing the line.
moveTo() starts a new subpath Top ↑
Calling moveTo() again does not connect the previous point to the new one. Instead, it starts another subpath. This is useful when you want separate lines or shapes to be rendered together with one stroke() call.
ctx.beginPath();
ctx.moveTo(30, 40);
ctx.lineTo(160, 40);
ctx.moveTo(30, 90);
ctx.lineTo(220, 120);
ctx.stroke();moveTo() vs beginPath() Top ↑
beginPath() clears the current list of subpaths and starts a fresh path. moveTo() does not clear the existing path; it simply starts another subpath at a new coordinate.
ctx.beginPath(); // discard previous path definitions
ctx.moveTo(20, 20); // start a new subpath here
ctx.lineTo(180, 80);
ctx.stroke();See closePath() when you want to connect the current subpath back to its starting point.
moveTo() vs lineTo() Top ↑
| Method | What it does |
|---|---|
moveTo(x, y) | Starts a new subpath at the specified point without creating a visible connecting line. |
lineTo(x, y) | Adds a straight line from the current point to the specified point. |
Using moveTo() to build a shape Top ↑
After setting the starting point, multiple lineTo() calls can build a connected shape. closePath() can then connect the final point back to the first.
ctx.beginPath();
ctx.moveTo(100, 20);
ctx.lineTo(180, 140);
ctx.lineTo(20, 140);
ctx.closePath();
ctx.stroke();Common moveTo() mistakes Top ↑
- Expecting
moveTo()itself to draw a visible line. - Using
lineTo()when you actually want to jump to a new disconnected starting point. - Forgetting
stroke()orfill()after building a path. - Confusing
moveTo()withbeginPath(). They perform different jobs. - Forgetting that, by default, Canvas Y coordinates increase downward.
Accessibility note Top ↑
Canvas path commands create pixels, not semantic page structure. If the drawing communicates important information, provide an equivalent text or HTML representation so the meaning is available without relying on the Canvas alone.
Frequently asked questions Top ↑
What does moveTo() do in Canvas? Top ↑
It starts a new subpath at the given X and Y coordinates without drawing a connecting line.
Does moveTo() draw anything? Top ↑
No. It only changes where the next path segment begins.
Do I need beginPath() before moveTo()? Top ↑
Use beginPath() when you want to discard the previous path definitions and start a fresh path. moveTo() itself only starts a new subpath.
Can I call moveTo() more than once in one path? Top ↑
Yes. Each call can begin another disconnected subpath, and all of them can later be stroked together.
What is the difference between moveTo() and lineTo()? Top ↑
moveTo() changes the starting position without connecting it; lineTo() adds a straight segment from the current point to the new point.
Related Canvas tutorials Top ↑
Canvas tutorial | lineTo() | closePath() | lineWidth | 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.
