Canvas rect(): Add a Rectangle to the Current Path

The Canvas rect(x, y, width, height) method adds a rectangle to the current path. It does not draw visible pixels by itself. After creating the rectangle, use stroke() for an outline, fill() for a filled shape, or both.

Use rect() when the rectangle should participate in a path. For a rectangle you want to draw immediately, fillRect() or strokeRect() is usually simpler.

Basic rect() example Top ↑

<canvas id="myCanvas" width="400" height="180"></canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.rect(20, 20, 100, 60);
ctx.strokeStyle = 'red';
ctx.stroke();
</script>

rect() syntax and parameters Top ↑

ctx.rect(x, y, width, height);

rect() returns undefined; its job is to add the rectangle to the path.

Interactive X, Y, width and height demo Top ↑

Move the controls to change the rectangle. The demo starts a fresh path before each redraw and then strokes that path.

Why beginPath() matters with rect() Top ↑

rect() adds to the current path. Calling beginPath() first clears the list of existing subpaths so a new drawing operation does not accidentally stroke or fill older path shapes again.

ctx.beginPath();
ctx.rect(20, 20, 80, 50);
ctx.stroke();

This differs from fillRect() and strokeRect(), which draw immediately and do not add rectangles to the current path.

Adding multiple rectangles to one path Top ↑

A useful reason to choose rect() is that several rectangles can be collected into one path and rendered together:

ctx.beginPath();
ctx.rect(20, 20, 80, 50);
ctx.rect(130, 20, 80, 50);
ctx.strokeStyle = 'blue';
ctx.stroke();

Fill and stroke the same rectangle path Top ↑

ctx.beginPath();
ctx.rect(30, 30, 120, 70);
ctx.fillStyle = 'lightblue';
ctx.strokeStyle = 'navy';
ctx.lineWidth = 3;
ctx.fill();
ctx.stroke();

See fillStyle, strokeStyle, and lineWidth for styling.

Negative width and height Top ↑

rect() accepts negative dimensions. A negative width extends left from x; a negative height extends upward from y.

ctx.beginPath();
ctx.rect(200, 120, -100, -60);
ctx.stroke();

rect() vs fillRect() and strokeRect() Top ↑

Accessibility note Top ↑

Canvas shapes are rendered pixels and do not automatically expose semantic structure. If a rectangle represents important data, labels, controls, or status, provide an equivalent accessible HTML representation rather than relying on the drawing alone.

Common rect() mistakes Top ↑

• Expecting rect() to draw immediately without calling fill() or stroke().
• Forgetting beginPath() and unintentionally rendering older path segments again.
• Confusing rect() with fillRect() or strokeRect().
• Forgetting that Canvas Y coordinates increase downward.
• Changing strokeStyle or fillStyle after rendering and expecting existing pixels to change.

Frequently asked questions Top ↑

What is the syntax of Canvas rect()? Top ↑

Use ctx.rect(x, y, width, height) to add a rectangular subpath to the current path.

Does rect() draw the rectangle automatically? Top ↑

No. Call stroke(), fill(), or both after adding the rectangle.

Do I need beginPath() before rect()? Top ↑

Use it when you want to start a fresh path. Without it, the rectangle is added to the existing current path.

Can rect() use negative width or height? Top ↑

Yes. Negative width extends left and negative height extends upward from the starting coordinates.

When should I use rect() instead of fillRect()? Top ↑

Use rect() when you need the rectangle as part of a path, especially when combining several shapes before filling or stroking them.

Related Canvas tutorials Top ↑

Canvas tutorial | fillRect() | strokeRect() | clearRect() | moveTo() | lineTo()

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.

About the author   Watch on YouTube

Connect: