Méthode closePath

La méthode closePath ferme automatiquement une forme dessinée avec la méthode lineTo, en traçant une ligne droite du point final au point initial. Si la forme était déjà fermée ou n'est qu'un point, la méthode ne fait rien.

Syntaxe

contexte.closePath();

Exemple

Pour commencer, dessinons deux lignes sans les fermer via closePath :

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();

Exemple

Et maintenant, fermons ces deux lignes en une forme via closePath, obtenant ainsi un triangle :

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.closePath(); // on ferme les lignes en une forme
ctx.stroke();

Exemple

Dessinons un carré, en fermant la forme via closePath au lieu de tracer la dernière ligne :

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath(); // on ferme les lignes en une forme
ctx.stroke();

Voir aussi

la méthode fill,
qui remplit la forme avec une couleur donnée