context.fillRect()

Overview

The context.fillRect() method draws a filled rectangle on the canvas by passing it four values:

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

This programs the context to draw a rectangle at (x, y) with the given width and height values. The rectangle is filled with the color, gradient, or pattern currently stored on the context's fillStyle property.

Mozilla Developer's Network

Draw a Filled Rectangle

In this example, we set the context's fillStyle to red and then use context.fillRect() to draw a filled rectangle at (100, 60) with a width of 240 and a height of 180. The coordinates (100, 60) apply to the rectangle's top left corner, which is 100 pixels to the right and 60 pixels down from the origin of the context.

Change the x-coordinate, y-coordinate, width, and height of the rectangle to see what happens.

To learn more about the coordinate system and defining fill colors, visit the Coordinates and fillStyle lessons.

Quick Reference: Coordinates fillStyle

Editor (write code below)

var canvas = document.getElementById('fill_rect_example1'); var context = canvas.getContext('2d'); context.fillStyle = 'Red'; context.fillRect(100, 60, 240, 180);

Message Log

This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run

Run and Focus Canvas

Reset

Canvas (your drawing will display here)

Challenge 1

Draw a red rectangle at (80, 40) with a width of 300 and a height of 200.

Editor (write code below)

var canvas = document.getElementById('fill_rect_challenge1'); var context = canvas.getContext('2d'); context.fillStyle = 'Red'; // DRAW THE RED RECTANGLE HERE

Message Log

This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run

Run and Focus Canvas

Reset

Canvas (your drawing will display here)

Position Rectangles Within a Shape

Positioning a rectangle is straightforward if we know the coordinates of its top left corner. But sometimes, if we have to position a rectangle relative to another rectangle, we aren't given its coordinates.

In this example, we draw the flag of Madagascar. We know the coordinates of the top left corner of the flag are supposed to be (60, 40), but what are the coordinates of the white, red, and green rectangles?

Since the top left corner of the white rectangle is the same as the top left corner of the flag, its coordinates are (60, 40).

Since the white rectangle is 100 pixels wide, the coordinates of the red rectangle are (160, 40). This positions the red rectangle 100 pixels to the right of the white rectangle.

And since the red rectangle is 100 pixels tall, the coordinates of the green rectangle are (160, 140). This positions the green rectangle 100 pixels below the red rectangle.

Quick Reference: Coordinates fillStyle

Editor (write code below)

var canvas = document.getElementById('fill_rect_example2'); var context = canvas.getContext('2d'); context.fillStyle = 'White'; context.fillRect(60, 40, 100, 200); // The white rectangle context.fillStyle = '#FC3D32'; context.fillRect(160, 40, 200, 100); // The red rectangle context.fillStyle = '#007E3A'; context.fillRect(160, 140, 200, 100); // The green rectangle

Message Log

This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run

Run and Focus Canvas

Reset

Canvas (your drawing will display here)

Challenge 2

Draw a larger version of the flag of Madagascar at (30, 40).

Draw the white rectangle so its width is 120 and its height is 240. Draw the red and green rectangles so their widths are 240 and their heights are 120.

Editor (write code below)

var canvas = document.getElementById('fill_rect_challenge2'); var context = canvas.getContext('2d'); context.fillStyle = 'White'; // DRAW THE WHITE RECTANGLE HERE context.fillStyle = '#FC3D32'; // DRAW THE RED RECTANGLE HERE context.fillStyle = '#007E3A'; // DRAW THE GREEN RECTANGLE HERE

Message Log

This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run

Run and Focus Canvas

Reset

Canvas (your drawing will display here)

Challenge 3

Draw a dark blue rectangle directly above a dark violet rectangle.

The top left corner of the dark violet rectangle is positioned at (50, 200), and it has a width of 320 and a height of 80.

Draw the dark blue rectangle so it has the same width as the dark violet rectangle and twice the height.

Editor (write code below)

var canvas = document.getElementById('fill_rect_challenge3'); var context = canvas.getContext('2d'); context.fillStyle = 'DarkViolet'; // DRAW THE DARK VIOLET RECTANGLE HERE context.fillStyle = 'DarkBlue'; // DRAW THE DARK BLUE RECTANGLE HERE

Message Log

This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run

Run and Focus Canvas

Reset

Canvas (your drawing will display here)

Challenge 4

Draw a green square at (140, 80) with a width and height of 120.

Then draw four smaller green squares with widths and heights of 60 touching the four corners of the larger square.

Editor (write code below)

var canvas = document.getElementById('fill_rect_challenge4'); var context = canvas.getContext('2d'); context.fillStyle = 'Green'; // DRAW THE LARGE GREEN SQUARE HERE // DRAW THE FOUR SMALLER GREEN SQUARES HERE

Message Log

This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run

Run and Focus Canvas

Reset

Canvas (your drawing will display here)

Use Draw Order to Layer Rectangles

If we program the context to draw two rectangles that overlap, the context will draw the second rectangle on top of the first rectangle.

In this example, we draw a white rectangle on top of an orange rectangle.

If we changed the order and drew the white rectangle first, then the white rectangle would be on the bottom and the orange rectangle on top.

Quick Reference: Coordinates fillStyle

Editor (write code below)

var canvas = document.getElementById('fill_rect_example3'); var context = canvas.getContext('2d'); context.fillStyle = 'Orange'; context.fillRect(60, 20, 240, 180); // The orange rectangle context.fillStyle = 'White'; context.fillRect(90, 50, 150, 100); // The white rectangle

Message Log

This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run

Run and Focus Canvas

Reset

Canvas (your drawing will display here)

Challenge 5

Draw a sky blue rectangle on top of a saddle brown rectangle.

The top left corner of the sky blue rectangle is positioned at (100, 80), and its width is 200 and its height is 160.

The saddle brown rectangle is positioned and sized so it forms a 40-pixel-wide border around the sky blue rectangle, like a picture frame.

Editor (write code below)

var canvas = document.getElementById('fill_rect_challenge5'); var context = canvas.getContext('2d'); context.fillStyle = 'SkyBlue'; context.fillStyle = 'SaddleBrown'; // USE THE FILL COLORS TO DRAW THE RECTANGLES HERE // NOTE: YOU MAY NEED TO CHANGE WHERE YOU SET THE FILL COLORS

Message Log

This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run

Run and Focus Canvas

Reset

Canvas (your drawing will display here)

Challenge 6

Draw the image to the right.

The two plum and two lemon chiffon rectangles inside of the midnight blue border each have a width of 120 and a height of 60.

The midnight blue border is 60-pixels-wide and the top left corner of the border is positioned at (20, 20).

Note: It is possible to draw this image with only four rectangles. Can you figure out how?

Editor (write code below)

var canvas = document.getElementById('fill_rect_challenge6'); var context = canvas.getContext('2d'); context.fillStyle = 'Plum'; context.fillStyle = 'LemonChiffon'; context.fillStyle = 'MidnightBlue'; // USE THE FILL COLORS TO DRAW THE RECTANGLES HERE // NOTE: YOU MAY NEED TO CHANGE WHERE YOU SET THE FILL COLORS

Message Log

This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run

Run and Focus Canvas

Reset

Canvas (your drawing will display here)