context.fillRect()

Overview

Overviewvisual1

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.

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

Challenge1visual1
What your drawing should look like

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)
Challenge1

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

Challenge2visual1
What your drawing should look like

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)
Challenge2

Challenge 3

Challenge3visual1
What your drawing should look like

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)
Challenge3

Challenge 4

Challenge4visual1
What your drawing should look like

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)
Challenge4

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

Challenge5visual1
What your drawing should look like

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)
Challenge5

Challenge 6

Challenge6visual1
What your drawing should look like

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)
Challenge6

Ready for the next lesson?

Next up, the "fillStyle" lesson >