THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML canvas closePath() Method

❮ HTML Canvas Reference

Example

Draw a path, shaped as the letter L, and then draw a line back to the starting point:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.closePath();
ctx.stroke();
Try it Yourself »

Browser Support

The numbers in the table specify the first browser version that fully supports the method.

Method
closePath() Yes 9.0 Yes Yes Yes

Definition and Usage

The closePath() method creates a path from the current point back to the starting point.

Tip: Use the stroke() method to actually draw the path on the canvas.

Tip: Use the fill() method to fill the drawing (black is default). Use the fillStyle property to fill with another color/gradient.

JavaScript syntax: context.closePath();

More Examples

Example

Use red as the fill color:

Yourbrowserdoesnotsupportthecanvastag.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = "red";
ctx.fill();
Try it Yourself »

❮ HTML Canvas Reference