Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Canvas closePath() Method

❮ Canvas Reference

Example

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

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.closePath();
ctx.stroke();
Try it Yourself »

Description

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

Use the stroke() or fill() method to draw the path.

See Also:

The beginPath() Method (Begin a new path)

The moveTo() Method (Move the path to a point)

The lineTo() Method (Add a line to the path)

The fill() Method (Fill current path)

The stroke() Method (Draw current path)


Syntax

context.closePath()

Parameters

NONE

Return Value

NONE


More Examples

Example

Fill the path with the color black:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.closePath();
ctx.stroke();
Try it Yourself »

Example

Fill the path with the color red:

Yourbrowserdoesnotsupportthecanvastag.

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.closePath();
ctx.fillStyle = "red";
ctx.fill();
Try it Yourself »

Browser Support

The <canvas> element is an HTML5 standard (2014).

closePath() is supported in all modern browsers:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 9-11

❮ Canvas Reference