Méthode closePath()

❮ Référence Canvas

Exemple

Dessinez un chemin en forme de lettre L et fermez-le avec une ligne de retour au point de départ :

Votre navigateur ne prend pas en charge la balise HTML5 canvas.

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();
Essayez-le vous-même »

Description

La méthode closePath() crée un chemin du point actuel au point de départ.

Utilisez la méthode stroke() ou fill() pour dessiner le chemin.

Voir aussi :

La méthode beginPath() (Commencer un nouveau chemin)

La méthode moveTo() (Déplacer le chemin vers un point)

La méthode lineTo() (Ajouter une ligne au chemin)

La méthode fill() (Remplir le chemin actuel)

La méthode stroke() (Dessiner le chemin actuel)


Syntaxe

context .closePath()

Paramètres

AUCUN

Valeur de retour

AUCUN


Plus d'exemples

Exemple

Remplissez le chemin avec la couleur noire :

Votre navigateur ne prend pas en charge la balise HTML5 canvas.

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();
Essayez-le vous-même »

Exemple

Remplissez le chemin avec la couleur rouge :

Votre navigateur ne prend pas en charge la balise canvas.

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();
Essayez-le vous-même »

Support des navigateurs

L'élément <canvas> est une norme HTML5 (2014).

closePath() est pris en charge par tous les navigateurs modernes :

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

❮ Référence Canvas