CanvasRenderingContext2D.fill()

CanvasRenderingContext2D.fill() - малює заповнений контур.

Синтаксис:

ctx.fill();

Параметри:

ctx - об'єкт CanvasRenderingContext2D.

Опис:

fill() метод об'єкту CanvasRenderingContext2D який малює заповнений контур з поточним стилем заповнення fillStyle.

Якщо контур не закритий то метод fill() додасть лінію від останньої точки до початкової точки контуру moveTo(), щоб закрити контур як closePath().

Приклад:

var canvas= document.getElementById("canvas");
crt = canvas.getContext("2d");
crt.beginPath(); //створюємо новий контур
crt.rect(10, 10, 50, 55);
crt.closePath(); //закриваємо контур
crt.fillStyle="black";
crt.fill();

var canvas= document.getElementById("canvas");
crt = canvas.getContext("2d");
crt.beginPath(); //створюємо контур
//малюємо лінії контуру
crt.moveTo(15, 15);
crt.lineTo(25, 45);
crt.lineTo(167, 89);
crt.lineTo(34, 56);
crt.lineTo(106, 125);
crt.closePath(); //закриваємо контур
crt.fillStyle="#001000";
crt.fill(); //замальовуємо контур

Приклад малювання трикутника:

var canvas= document.getElementById("canvas2");
crt = canvas.getContext("2d");
crt.beginPath(); //створюємо контур
//малюємо лінії контуру трикутника
crt.moveTo(50, 50); //верхня початкова точка
crt.lineTo(125, 125);
crt.lineTo(50, 125);
crt.lineTo(50, 50); //не обов'язково з'єднювати з початковою точкою
crt.closePath(); //закриваємо контур
crt.fillStyle="red";
crt.fill(); //замальовуємо контур