Workshop › Simon Says Colors › Step 10 of 27

Show the round

What we are doing

In the top strip we write the round number: Round 1, Round 2... The round is the length of the sequence.

```js
  ctx.fillStyle = 'white'
  ctx.font = 'bold 18px sans-serif'
  ctx.textAlign = 'left'
  ctx.fillText('Round ' + sequence.length, 10, 27)
}
```

What it means

• ctx.font sets the size and style; textAlign = 'left' makes x the left edge of the text.
• 'Round ' + sequence.length glues text and a number: 'Round 1'.
• fillText(text, 10, 27) writes it 10 pixels from the left, in the strip.

Your turn

In draw, after the forEach block's }), leave an empty line and write the four lines, above the function's last }.

Skills: Drawing on a canvas

← The sequence to remember Light a pad for a while →

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