Metoda closePath

Metoda closePath închide automat forma desenată cu metoda lineTo, trăgând o linie dreaptă din punctul final în punctul de start. Dacă forma era deja închisă sau este doar un punct, atunci metoda nu face nimic.

Sintaxă

javascriptcontext.closePath();

Exemplu

Pentru început, să desenăm două linii, fără a le închide prin closePath:

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

javascriptlet 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();

Результат:

Exemplu

Iar acum să închidem aceste două linii într-o formă prin closePath, obținând astfel un triunghi:

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

javascriptlet 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(); // închidem liniile într-o formă
ctx.stroke();

Результат:

Exemplu

Să desenăm un pătrat, în locul ultimei linii închizând forma prin closePath:

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

javascriptlet 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(); // închidem liniile într-o formă
ctx.stroke();

Результат:

Vedeți și