Drawing rectangles

Learn to draw rectangles with fillRect, strokeRect and clearRect.

Filled rectangles with fillRect

fillRect(x, y, width, height) draws a filled rectangle. The first two numbers are the top-left corner, the last two are the size.

The fill color is set by the fillStyle property. The color is written as a string, for example 'red' or '#00ff00'. The color must be set before the fillRect call, because drawing uses the current color.

strokeRect and clearRect

strokeRect draws only the outline of the rectangle; it leaves the inside empty. You set the outline color with strokeStyle.

clearRect erases a rectangular region and makes it transparent. It is often used in animation to clear the previous frame. All three methods take the same four arguments: x, y, width, height.

Exercise Filled and stroked rectangle

First set the fill color to red with ctx.fillStyle = 'red' and draw a filled rectangle with ctx.fillRect(10, 10, 60, 40). Then set the stroke color to blue with ctx.strokeStyle = 'blue' and draw the stroked rectangle with ctx.strokeRect(10, 10, 60, 40).

Show example solution

ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 60, 40);
ctx.strokeStyle = 'blue';
ctx.strokeRect(10, 10, 60, 40);

Test yourself

When should fillStyle be set?
```
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 30);
```
- Before the fillRect call
- After the fillRect call
- On the same line as fillRect
- Set automatically after drawing
Show answer

Before the fillRect call — Correct! fillStyle must be set before fillRect; drawing uses the current color.

Draw a filled rectangle

ctx.____(10, 10, 50, 30);

Show answer

ctx.fillRect(10, 10, 50, 30);

Match the rectangle methods

fillRect

filled rectangle
strokeRect

outline
clearRect

clear
fillStyle

fill color

Next lesson: Paths and lines

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies