CanvasRenderingContext2D.beginPath()

CanvasRenderingContext2D.beginPath() - створює новий контур.

Синтаксис:

ctx.beginPath();

Параметри:

ctx - об'єкт CanvasRenderingContext2D.

Опис:

beginPath() метод об'єкту CanvasRenderingContext2D який створює новий контур, спорожнює попередні контури.

Щоб закрити контур використовуйте метод closePath().

Створювати новий контур необхідно коли ви малюєте ліні, коло, еліпс і т.п. в іншому випадку будуть замальовані попередні контури які були створені (наприклад методом lineTo(), arc()).

Для малювання контуру на полотні canvas необхідно визвати методи stroke() або fill().

Приклад:

<canvas id="canvas"><b style="color:red;">Ваш браузер не підтримує canvas.</b></canvas>

var canvas= document.getElementById("canvas");
crt = canvas.getContext("2d");

crt.beginPath(); //створюємо новий контур
//малюємо контури
crt.moveTo(10, 10);
crt.lineTo(55, 10);
crt.lineTo(55, 65);
crt.closePath(); //закриваємо контур
crt.stroke(); //обмальовуємо контур

var canvas= document.getElementById("canvas");
crt = canvas.getContext("2d");

crt.beginPath(); //створюємо новий контур
//малюємо контури
crt.moveTo(10, 10);
crt.lineTo(55, 10);
crt.lineTo(55, 65);
crt.closePath(); //закриваємо контур
crt.fill(); //замальовуємо контур

 var canvas= document.getElementById("canvas");
crt = canvas.getContext("2d");

crt.beginPath();
//малюємо контури
crt.moveTo(1, 1);
for(i=1, j=1; i<canvas.height; i+=5, j+=6){
crt.lineTo(i, j);
crt.lineTo(j, i);
}
crt.closePath();
crt.fillStyle="#010059";
crt.fill();