CanvasRenderingContext2D: strokeRect() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The
CanvasRenderingContext2D.strokeRect()
method of the Canvas 2D API draws a rectangle that is stroked (outlined) according to
the current strokeStyle
and other
context settings.
This method draws directly to the canvas without modifying the current path, so any
subsequent fill()
or
stroke()
calls will have no effect
on it.
Syntax
strokeRect(x, y, width, height)
The strokeRect()
method draws a stroked rectangle whose starting point is
at (x, y)
and whose size is specified by width
and
height
.
Parameters
Return value
None (undefined
).
Examples
A simple stroked rectangle
This example draws a rectangle with a green outline using the strokeRect()
method.
HTML
<canvas id="canvas"></canvas>
JavaScript
The rectangle's top-left corner is at (20, 10). It has a width of 160 and a height of 100.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "green";
ctx.strokeRect(20, 10, 160, 100);
Result
Applying various context settings
This example draws a rectangle with a drop shadow and thick, beveled outlines.
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);
Result
Specifications
Specification |
---|
HTML Standard # dom-context-2d-strokerect-dev |
Browser compatibility
BCD tables only load in the browser
See also
- The interface defining this method:
CanvasRenderingContext2D
CanvasRenderingContext2D.strokeStyle
CanvasRenderingContext2D.clearRect()
CanvasRenderingContext2D.fillRect()