Workshop › Simon Says Colors › Step 2 of 27

A dark board

What we are doing

Our first drawing: the whole canvas becomes dark navy, so the colored pads will glow on it. Drawing is always two moves: pick a color, then fill a shape with it.

```js
ctx.fillStyle = '#0f172a'
ctx.fillRect(0, 0, canvas.width, canvas.height)
```

What it means

• ctx.fillStyle = '#0f172a' picks the fill color, a dark navy.
• ctx.fillRect(x, y, width, height) fills a rectangle. 0, 0 is the top-left corner, and canvas.width and canvas.height (400 and 440) make it cover everything.

Your turn

Leave an empty line under const ctx = ..., write the two lines, then press Run.

Skills: Drawing on a canvas

← Get the canvas and the pen The first pad →

All steps

1. Get the canvas and the pen
2. A dark board
3. The first pad
4. Two colors for every pad
5. All four pads
6. A function that draws
7. Light a pad
8. Draw again and again
9. The sequence to remember
10. Show the round
11. Light a pad for a while
12. Go dark again
13. The computer shows a pad
14. Show the whole sequence
15. Watch, then your turn
16. Check each press
17. Play with the keyboard
18. Which pad is at a point?
19. Play with the mouse
20. Progress and mistakes
21. A function for a new game
22. Click to retry
23. Light up when pressed
24. Faster and faster
25. Save the best score
26. Show the best score
27. Build it yourself: no dawdling