Workshop › Simon Says Colors › Step 3 of 27

The first pad

What we are doing

The four pads share the board below a 40 pixel strip for the text. Each pad is a square filling a quarter, 6 pixels in from every side. We draw the first one, the green pad, in its dim color.

```js
const TOP = 40 // room for the score
const HALF = canvas.width / 2

ctx.fillStyle = '#14532d'
ctx.fillRect(6, TOP + 6, HALF - 12, HALF - 12)
```

What it means

• TOP is the height of the text strip; HALF is half the board's width, 200: the size of a quarter.
• The square starts 6 pixels in from the quarter's corner (6, TOP + 6) and is HALF - 12 wide and tall, leaving 6 pixels on every side.

Your turn

1. Under const ctx = ..., leave an empty line and write TOP and HALF.
2. At the very end, leave an empty line and write the two green lines. Press Run.

Skills: Drawing on a canvas

← A dark board Two colors for every 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