Metod closePath

Metod closePath automatski zatvara figuru, nacrtanu pomoću metode lineTo, crtajući pri tome pravu liniju od krajnje tačke do početne. Ako je figura već zatvorena ili je samo tačka, onda metod ne čini ništa.

Sintaksa

kontekst.closePath();

Primer

Za početak nacrtajmo dve linije, ne zatvarajući ih preko 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();

Primer

A sada zatvorimo ove dve linije u figuru preko closePath, dobivajući time trougao:

<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(); // zatvaramo linije u figuru
ctx.stroke();

Primer

Hajde da nacrtamo mali kvadrat, umesto poslednje linije zatvorimo figuru preko 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(); // zatvaramo linije u figuru
ctx.stroke();

Pogledajte takođe

metod fill,
koji boji figuru zadatom bojom