Metoden closePath

Metoden closePath lukker automatisk en figur, der er tegnet med metoden lineTo, ved at tegne en lige linje fra slutpunktet til startpunktet. Hvis figuren allerede er lukket eller kun er et enkelt punkt, gør metoden ingenting.

Syntaks

kontekst.closePath();

Eksempel

Lad os starte med at tegne to linjer uden at lukke dem med 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();

Eksempel

Lad os nu lukke disse to linjer til en figur med closePath og derved opnå en trekant:

<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(); // lukker linjerne til en figur
ctx.stroke();

Eksempel

Lad os tegne en firkant, og i stedet for den sidste linje lukke figuren med 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(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath(); // lukker linjerne til en figur
ctx.stroke();

Se også

metoden fill,
som fylder figuren med en given farve