Metoden closePath

Metoden closePath stänger automatiskt en figur som ritats med metoden lineTo genom att rita en rak linje från slutpunkten till startpunkten. Om figuren redan är stängd eller bara är en punkt, så gör metoden ingenting.

Syntax

context.closePath();

Exempel

Låt oss först rita två linjer utan att stänga 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();

Exempel

Och nu stänger vi dessa två linjer till en figur med closePath, och får därmed en triangel:

<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(); // stänger linjerna till en figur
ctx.stroke();

Exempel

Låt oss rita en kvadrat, och istället för den sista linjen stänga 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(); // stänger linjerna till en figur
ctx.stroke();

Se även

metoden fill,
som fyller figuren med en given färg