Перейти к содержанию

fill()

Метод fill() делает заливку текущей фигуры (контура). Цвет заливки по умолчанию черный.

Чтобы установить другой цвет/градиент заливки, используется свойство fillStyle.

Если контур не закрыт, то метод fill() добавит линию от последней к начальной точке контура, чтобы закрыть контур (как метод closePath()), и затем заполнить этот контур.

Синтаксис

void ctx.fill([fillRule]);
void ctx.fill(path[, fillRule]);

Параметры

fillRule
Выбор алгоритма заливки фигуры
Возможные значения:
  • nonzero: Правило ненулевого индекса, значение по умолчанию
  • evenodd: Четно-нечетное правило
path
Path2D путь для заливки.

Спецификация

Пример

Нарисуем два прямоугольника 150x100 пикселей. Один зальем красным цветом, а другой синим:

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript:

var c = document.getElementById('myCanvas')
var ctx = c.getContext('2d')

ctx.beginPath()
ctx.rect(20, 20, 150, 100)
ctx.fillStyle = 'red'
ctx.fill()

ctx.beginPath()
ctx.rect(40, 40, 150, 100)
ctx.fillStyle = 'blue'
ctx.fill()

Ссылки