Canvas strokeRect(): Draw Rectangle Outlines
The Canvas strokeRect(x, y, width, height) method immediately draws the outline of a rectangle. Its border uses the current strokeStyle, lineWidth, and other stroke settings.
Use strokeRect() when you need a rectangular border without filling the inside.
Basic strokeRect() example Top ↑
<canvas id="my_canvas" width="400" height="180"></canvas>
<script>
const canvas = document.getElementById('my_canvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.lineWidth = 6;
ctx.strokeRect(20, 20, 120, 70);
</script>strokeRect() syntax and parameters Top ↑
ctx.strokeRect(x, y, width, height);| Parameter | Meaning |
|---|---|
x | Horizontal coordinate of the rectangle's starting point. |
y | Vertical coordinate of the starting point. |
width | Rectangle width. Positive values extend right; negative values extend left. |
height | Rectangle height. Positive values extend down; negative values extend up. |
The method returns no useful value. It paints the rectangle outline directly onto the canvas.
Interactive X, Y, width and height demo Top ↑
Move the controls to see how the four arguments change the rectangle. This keeps the original page's interactive learning idea while using native range inputs instead of jQuery UI sliders.
Changing border color and thickness Top ↑
strokeStyle controls the outline color or paint style, while lineWidth controls its thickness.
ctx.strokeStyle = '#0d6efd';
ctx.lineWidth = 8;
ctx.strokeRect(25, 25, 150, 80);For more control over the outline, see strokeStyle, lineWidth, lineJoin, and setLineDash().
Does strokeRect() change the current path? Top ↑
No. strokeRect() draws directly to the canvas without adding the rectangle to the current path. For a simple outlined rectangle, you do not need beginPath() or a separate stroke() call.
// Direct drawing: no beginPath() or stroke() required
ctx.strokeStyle = 'green';
ctx.strokeRect(10, 10, 100, 50);If you need a rectangle to become part of the current path, use rect() and then call stroke().
Negative width and height Top ↑
Width and height can be negative. Negative width draws toward the left of x; negative height draws upward from y.
ctx.strokeStyle = 'purple';
ctx.lineWidth = 4;
ctx.strokeRect(220, 130, -120, -70);strokeRect(), fillRect(), clearRect() and rect() Top ↑
| Method | Use |
|---|---|
strokeRect() | Immediately draws only the rectangular outline using the current stroke settings. |
fillRect() | Immediately draws a filled rectangle using the current fill style. |
clearRect() | Clears a rectangular area of the canvas. |
rect() | Adds a rectangle to the current path, which you can later fill or stroke. |
Drawing a filled rectangle with an outline Top ↑
You can call fillRect() and strokeRect() with the same coordinates to draw a fill and a border.
ctx.fillStyle = '#ffc107';
ctx.fillRect(30, 30, 140, 80);
ctx.strokeStyle = '#212529';
ctx.lineWidth = 4;
ctx.strokeRect(30, 30, 140, 80);Accessibility note Top ↑
A rectangle drawn on Canvas is only pixels. If its border, color, size or position communicates important information, provide the same information through accessible HTML or another suitable text alternative. Do not make essential instructions depend only on the drawing.
Common strokeRect() mistakes Top ↑
- Using
fillStylewhen you mean to change the rectangle's outline. UsestrokeStyle. - Adding unnecessary
beginPath()andstroke()calls aroundstrokeRect(). - Setting
strokeStyleorlineWidthafter the rectangle has already been drawn. - Confusing
strokeRect()withrect(), which modifies the current path rather than drawing immediately. - Forgetting that thick strokes extend around the rectangle boundary, so part of the stroke may reach outside the intended area.
Frequently asked questions Top ↑
What is the syntax of Canvas strokeRect()? Top ↑
The syntax is ctx.strokeRect(x, y, width, height).
How do I change the strokeRect() color? Top ↑
Set ctx.strokeStyle before calling strokeRect().
How do I make the rectangle border thicker? Top ↑
Set ctx.lineWidth to a positive value before drawing the rectangle.
Does strokeRect() need beginPath()? Top ↑
No. It draws directly and does not modify the current path.
How do I draw a filled rectangle instead? Top ↑
Use fillRect(). To draw both a fill and an outline, call fillRect() and strokeRect() with the same rectangle dimensions.
Related Canvas tutorials Top ↑
Canvas tutorial | fillRect() | clearRect() | rect() | strokeStyle | lineWidth
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
