CanvasRenderingContext2D: метод rect()

Метод CanvasRenderingContext2D.rect() API Canvas 2D добавляет прямоугольник в текущую траекторию.

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

rect(x, y, width, height)

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

x

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

y

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

width

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

height

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

None (undefined).

В этом примере используется метод rect() для создания прямоугольной траектории. Затем траектория отображается с помощью метода fill().

HTML

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

JavaScript

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

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath(); // Start a new path
ctx.rect(10, 20, 150, 100); // Add a rectangle to the current path
ctx.fill(); // Render the path

Результат

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