Workshop › Simon Says Colors › Step 6 of 27

A function that draws

What we are doing

The pads will light up and go dark, so the board must be drawn again and again. We put the drawing lines in a function named draw, so one word repaints everything.

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

  PADS.forEach((pad, i) => {
    const x = (i % 2) * HALF
    const y = TOP + Math.floor(i / 2) * HALF
    ctx.fillStyle = pad.dim
    ctx.fillRect(x + 6, y + 6, HALF - 12, HALF - 12)
  })
}

draw()
```

What it means

• function draw() { ... } defines the recipe; it does not run yet.
• The body is indented by two spaces.
• draw() with parentheses runs it. It paints the background first, which wipes the old picture.

Your turn

Wrap the drawing lines in function draw() { ... } (indent them by two spaces) and call draw() after it.

Skills: Functions

← All four pads Light a 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