Canvas fillRect(): Draw Filled Rectangles with JavaScript

The Canvas fillRect(x, y, width, height) method immediately draws a filled rectangle. The x and y values set its starting position, while width and height set its size.

The rectangle uses the current fillStyle. If you do not set a fill style, the default is black.

Basic fillRect() example Top ↑

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

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

ctx.fillStyle = 'red';
ctx.fillRect(20, 20, 100, 60);
</script>

fillRect() syntax and parameters Top ↑

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

Parameter	Meaning
`x`	Horizontal coordinate of the rectangle's starting point. X increases from left to right.
`y`	Vertical coordinate of the starting point. Y increases from top to bottom.
`width`	Rectangle width. Positive values extend right; negative values extend left.
`height`	Rectangle height. Positive values extend down; negative values extend up.

fillRect() does not return a useful value; it draws directly into the canvas.

Interactive X, Y, width and height demo Top ↑

Move the controls to see how each argument changes the rectangle. The values are kept within the visible canvas in this demo.

X position: 20 Y position: 20 Width: 50 Height: 50

Changing the rectangle color with fillStyle Top ↑

Set fillStyle before calling fillRect(). It can use a CSS color, a Canvas gradient or a Canvas pattern.

ctx.fillStyle = '#0d6efd';
ctx.fillRect(20, 20, 120, 60);

ctx.fillStyle = 'rgba(220, 53, 69, 0.6)';
ctx.fillRect(80, 50, 120, 60);

See Canvas fillStyle, linear gradients, and radial gradients.

Does fillRect() use the current path? Top ↑

No. fillRect() draws directly to the canvas and does not add a rectangle to the current path. You do not need beginPath() or fill() for a simple fillRect() call.

// Direct drawing: no beginPath() or fill() required
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 50);

If you want the rectangle to become part of a reusable path, use rect() and then call fill() or stroke().

Using negative width or height Top ↑

Width and height can be negative. A negative width extends the rectangle to the left of x, while a negative height extends it upward from y.

ctx.fillStyle = 'purple';
ctx.fillRect(200, 120, -100, -60);

fillRect(), strokeRect(), clearRect() and rect() Top ↑

Method	Use
`fillRect()`	Immediately draws a filled rectangle using the current fill style.
`strokeRect()`	Immediately draws only the rectangle outline using the current stroke style.
`clearRect()`	Clears the specified rectangular area to transparent black.
`rect()`	Adds a rectangle to the current path; render it later with `fill()` or `stroke()`.

Filling the entire canvas Top ↑

A common use is to paint a background before drawing other graphics:

ctx.fillStyle = '#f8f9fa';
ctx.fillRect(0, 0, canvas.width, canvas.height);

Remember that Canvas is transparent by default. Painting a full-size rectangle gives the bitmap an explicit background color.

Accessibility note Top ↑

A rectangle drawn on Canvas is pixels, not a semantic HTML element. If its color, size or position communicates important information, provide that information in accessible HTML as well. Do not rely only on the graphic to communicate essential text or controls.

Common fillRect() mistakes Top ↑

Forgetting that Canvas Y coordinates increase downward from the top edge.
Calling fillStyle after fillRect() and expecting it to recolor an existing rectangle.
Adding unnecessary beginPath(), stroke() or fill() calls around fillRect().
Confusing fillRect() with rect(), which only adds a rectangle to the current path.
Using Canvas pixels as the only way to present important text or data.

Frequently asked questions Top ↑

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

The syntax is ctx.fillRect(x, y, width, height).

What color does fillRect() use by default? Top ↑

It uses the current fillStyle. The default fill style is black.

Does fillRect() need beginPath()? Top ↑

No. It draws directly to the canvas and does not modify the current path.

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

Yes. Negative width extends left from the X coordinate, and negative height extends upward from the Y coordinate.

How do I draw only the rectangle border? Top ↑

Use strokeRect() instead of fillRect().

Canvas tutorial | rect() | strokeRect() | clearRect() | fillStyle

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:

Canvas fillRect(): Draw Filled Rectangles