The strokeRect
method draws
a rectangle outline at the given
point. The first two parameters
set the coordinates of the point
where the upper left corner of
the drawn rectangle will be.
Syntax
context.strokeRect(x, y, width, height);
Example
Let's draw a rectangle
with strokeRect
:
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
ctx.strokeRect(50, 50, 100, 75);
:
See also
-
the
fillRect
method
that draws a filled rectangle -
the
rect
method
that draws a rectangle -
the
lineTo
method
that draws a line -
the
strokeStyle
property
that sets a line color