CanvasRenderingContext2D: метод fillRect()

Метод CanvasRenderingContext2D.fillRect() API Canvas 2D рисует прямоугольник, заполненный в соответствии с текущим fillStyle.

Этот метод рисует прямо на холсте без изменения текущей траектории, поэтому последующие вызовы fill() или stroke() не повлияют на него.

fillRect(x, y, width, height)

Метод fillRect() рисует заполненный прямоугольник, начальная точка которого находится в (x, y) , а размеры определяются width и height. Стиль заливки определяется текущим атрибутом fillStyle.

x

Координата x начальной точки прямоугольника.

y

Координата y начальной точки прямоугольника.

width

Ширина прямоугольника. Положительные значения — вправо, отрицательные — влево.

height

Высота прямоугольника. Положительные значения — вниз, отрицательные — вверх.

None (undefined).

В этом примере используется метод fillRect() для рисования заполненного зелёного прямоугольника.

HTML

<canvas id="canvas"></canvas>

JavaScript

Верхний левый угол прямоугольника находится в координатах (20, 10). Его ширина — 150, а высота — 100.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(20, 10, 150, 100);

Результат

Этот фрагмент кода заполняет весь холст прямоугольником. Это часто используется для создания фона, поверх которого затем можно рисовать другие элементы. Для этого размеры прямоугольника устанавливаются равными атрибутам элемента <canvas> width и height.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, canvas.width, canvas.height);

• Интерфейс, определяющий этот метод: CanvasRenderingContext2D
• CanvasRenderingContext2D.fillStyle
• CanvasRenderingContext2D.clearRect()
• CanvasRenderingContext2D.strokeRect()