Canvas closePath(): Close a Subpath and Connect to Its Start

The Canvas closePath() method closes the current subpath by connecting its current point back to its starting point with a straight line when needed. It changes the path, but the closing edge is not painted until you call a rendering method such as stroke().

A common use is closing polygons. For example, after drawing two sides of a triangle with lineTo(), closePath() adds the final side back to the starting point.

Basic closePath() 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, 20);
ctx.lineTo(170, 170);
ctx.lineTo(320, 20);
ctx.closePath();
ctx.stroke();
</script>

closePath() syntax Top ↑

ctx.closePath();

closePath() takes no parameters and returns undefined. If the current subpath is already closed or contains only one point, calling it has no visible effect.

How closePath() works Top ↑

Think of a subpath as a sequence of connected path commands. After moveTo() establishes the starting point and commands such as lineTo() add segments, closePath() connects the current point back to that subpath's start.

ctx.beginPath();
ctx.moveTo(50, 30);    // Starting point
ctx.lineTo(180, 150);
ctx.lineTo(300, 30);
ctx.closePath();         // Back to (50, 30)
ctx.stroke();

closePath() vs beginPath() Top ↑

Method	Purpose
`closePath()`	Closes the current subpath by connecting its end back to its start.
`beginPath()`	Starts a new path by clearing the current list of subpaths.
`moveTo(x, y)`	Starts a new subpath at the specified point without drawing a connecting segment.

closePath() does not clear the current path. If you want subsequent drawing commands to start a completely new path, call beginPath().

Why closePath() matters when stroking Top ↑

When you use stroke(), an open polygon stays open unless you explicitly add the final line yourself or call closePath().

ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(150, 150);
ctx.lineTo(270, 30);
ctx.closePath();
ctx.lineWidth = 4;
ctx.strokeStyle = '#3366cc';
ctx.stroke();

Using closePath() also lets Canvas treat the join between the last and first segments as a true path join, so properties such as lineJoin can apply consistently at that corner.

Do you need closePath() before fill()? Top ↑

Usually, no. When fill() renders an open subpath, Canvas treats it as closed for the purpose of filling the area. That does not mean the stored path itself has been changed by a closePath() call.

ctx.beginPath();
ctx.moveTo(40, 30);
ctx.lineTo(160, 150);
ctx.lineTo(280, 30);
ctx.fillStyle = '#d9e8ff';
ctx.fill(); // Open shape is treated as closed for filling

Call closePath() when you want the path itself explicitly closed, especially when you also intend to stroke it.

closePath() vs drawing the last line manually Top ↑

You can manually draw a final lineTo() back to the starting coordinates, but closePath() communicates the intent more clearly and closes the subpath using the Canvas path model.

// Explicitly close the current subpath
ctx.closePath();

// Alternative: manually return to known starting coordinates
ctx.lineTo(20, 20);

Common closePath() mistakes Top ↑

Expecting closePath() itself to paint the closing edge. Use stroke() to render the outline.
Using closePath() when the intention is to clear previous subpaths. Use beginPath() for that.
Calling closePath() after every line segment instead of only when a subpath should be closed.
Assuming fill() requires closePath(). Open subpaths are closed for filling automatically.
Forgetting that Canvas drawings are pixels and do not create accessible document structure by themselves.

Accessibility note Top ↑

If a closed Canvas shape communicates information such as a diagram, chart, status, or control, provide equivalent text or semantic HTML. Do not rely on the painted Canvas shape alone to communicate essential meaning.

Frequently asked questions Top ↑

What does closePath() do in Canvas? Top ↑

It closes the current subpath by connecting its current point back to the subpath's starting point when a closing segment is needed.

Does closePath() draw the line immediately? Top ↑

No. It changes the path. Call stroke() to paint its outline.

Is closePath() the same as beginPath()? Top ↑

No. closePath() closes the current subpath, while beginPath() starts a new path by clearing the existing list of subpaths.

Do I need closePath() before fill()? Top ↑

Not normally. fill() treats open subpaths as closed when calculating the filled area.

Can closePath() be used for triangles and polygons? Top ↑

Yes. It is particularly useful after building a polygon with moveTo() and multiple lineTo() calls.

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.

About the author Watch on YouTube

Connect:

Canvas closePath(): Close a Subpath