Workshop › Typing Rain › Step 30 of 33

Draw the keyboard

What we are doing

Each key is a dark box with its letter in the middle. forEach goes over the rows, and a for loop over the letters of each row.

```js
ctx.textAlign = 'center'
ctx.font = 'bold 18px sans-serif'
ROWS.forEach((keys, row) => {
  for (let i = 0; i < keys.length; i++) {
    const k = keyRect(row, i)
    ctx.fillStyle = '#1e293b'
    ctx.fillRect(k.x, k.y, KEY_W, KEY_H)
    ctx.fillStyle = '#e2e8f0'
    ctx.fillText(keys[i], k.x + KEY_W / 2, k.y + 23)
  }
})
```

What it means

• ROWS.forEach((keys, row) => ...) runs once per row: keys is its text, row its number.
• A text works like a list: keys[i] is its ith letter and keys.length how many there are.
• The letter is centred in the box (KEY_W / 2), with its baseline 23 pixels from the top.

Your turn

At the end of draw, after the game over block, leave an empty line and write the keyboard lines.

Skills: Drawing on a canvas, Loops

← Where the keys go Light up the next key →

All steps

1. A sky for the words
2. The ground
3. A word on the canvas
4. A function that draws
5. A list of words
6. Make them fall
7. The game loop
8. A new word from the list
9. Let it rain
10. Gone past the ground
11. Lock on to a word
12. Listen to the keyboard
13. Letter by letter
14. Half a word in yellow
15. Let go of a lost word
16. Lives
17. Hearts
18. Score
19. Out of lives
20. Freeze the game
21. The game over panel
22. Play again
23. Levels
24. Faster and faster
25. Best score
26. Accuracy
27. Words per minute
28. Your speed at the end
29. Where the keys go
30. Draw the keyboard
31. Light up the next key
32. Tap the keys
33. Build it yourself: change your mind