Metoda closePath

Metoda closePath mbyll automatikisht figurën, e vizatuar me metodën lineTo, duke vizatuar një vijë të drejtë nga pika fundore në pikën fillestare. Nëse figura është e mbyllur tashmë ose është thjesht një pikë, atëherë metoda nuk bën asgjë.

Sintaksa

konteksti.closePath();

Shembull

Për fillim, le të vizatojmë dy vija, pa i mbyllur ato me 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();

Shembull

Tani le t'i mbyllim këto dy vija në një figurë me closePath, duke marrë kështu një trekëndësh:

<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(); // mbyllim vijat në figurë
ctx.stroke();

Shembull

Le të vizatojmë një katror, në vend të vijës së fundit duke mbyllur figurën me 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(); // mbyllim vijat në figurë
ctx.stroke();

Shihni gjithashtu

metoda fill,
që mbush figurën me një ngjyrë të caktuar