Метод closePath

Метод closePath аутоматски затвара фигуру, нацртану методом lineTo, цртајући при том праву линију од крајње тачке до почетне. Ако је фигура већ затворена или је само тачка, тада метод ништа не ради.

Синтакса

javascriptконтекст.closePath();

Пример

За почетак нацртајмо две линије, не затварајући их преко 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();

Результат:

Пример

А сада затворимо ове две линије у фигуру преко 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.closePath(); // затварамо линије у фигуру
ctx.stroke();

Результат:

Пример

Хајде да нацртамо квадратић, уместо последње линије затворивши фигуру преко 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(); // затварамо линије у фигуру
ctx.stroke();

Результат:

Види такође