closePath method
Closes the current subpath and starts a new subpath that has a start point that is equal to the end of the closed subpath.
![]() ![]() |
Syntax
CanvasRenderingContext2D.closePath();Parameters
This method has no parameters.
Return value
This method does not return a value.
Standards information
- HTML Canvas 2D Context, Section 9
Remarks
Be aware that CanvasRenderingContext2D represents a canvas rendering 2D context object, as shown in the following example.
Examples
The following code example shows how the closePath method closes a path. The image shows the output where two lines have the path closed.

<!DOCTYPE html> <html> <head> <title>Canvas closePath example</title> <script> function closeDemo() { var canvas = document.getElementById("demo") if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.lineWidth = "3"; ctx.strokeStyle = "blue"; ctx.moveTo(0, 0); ctx.lineTo(150, 150); ctx.lineTo(200, 150); ctx.stroke(); ctx.closePath(); ctx.moveTo(0, 0); ctx.lineTo(50, 150); ctx.stroke(); } } </script> </head> <body onload="closeDemo();"> <canvas id="demo" width="300" height="300">This browser or document mode doesn't support canvas</canvas> </body> </html>
See also
Show:

