CanvasRenderingContext2D.beginPath()

La méthode CanvasRenderingContext2D.beginPath() de l'API Canvas 2D permet de commencer un nouveau chemin en vidant la liste des sous-chemins. Appelez cette méthode quand vous voulez créer un nouveau chemin.

void ctx.beginPath();

Ceci est un simple snippet de code qui utilise la méthode beginPath.

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// Premier chemin
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();

// Second chemin
ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.moveTo(20, 20);
ctx.lineTo(120, 120);
ctx.stroke();

Éditez le code ci-dessous pour voir vos changements directemment apportés au canvas:

• L'interface qui définit cette méthode, CanvasRenderingContext2D
• CanvasRenderingContext2D.closePath()