CanvasRenderingContext2D: метод strokeRect()

Метод CanvasRenderingContext2D.strokeRect() API холста 2D рисует прямоугольник, который обводится (очерчивается) в соответствии с текущим strokeStyle и другими настройками контекста.

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

strokeRect(x, y, width, height)

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

x

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

y

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

width

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

height

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

None (undefined).

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

HTML

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

JavaScript

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

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "green";
ctx.strokeRect(20, 10, 160, 100);

Результат

В этом примере рисуется прямоугольник с тенью и толстой, фаской обводкой.

HTML

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

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.shadowColor = "#d53";
ctx.shadowBlur = 20;
ctx.lineJoin = "bevel";
ctx.lineWidth = 15;
ctx.strokeStyle = "#38f";
ctx.strokeRect(30, 30, 160, 90);

Результат

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