Workshop › Typing Rain › Step 1 of 33

Typing Rain: A sky for the words

Type the falling words before they land. Measuring text to place it, locking on to the most urgent word, drawing half a word in another color, lives, levels tuned by measuring real typing speeds, words per minute and accuracy, and a keyboard that lights up the next key.

What we are doing

In this game words fall from the sky, and you type them before they land. First the sky: find the canvas, take its pen and paint it night blue.

```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')

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

What it means

• document.getElementById('game') finds the canvas; const canvas = names it.
• canvas.getContext('2d') gives the pen with all drawing commands; we call it ctx.
• fillStyle picks a color, fillRect(x, y, width, height) fills a rectangle. (0, 0) is the top-left corner, and canvas.width, canvas.height (480, 480) make it cover everything.

Your turn

Write the lines under the three comment lines, then press Run.

Skills: Drawing on a canvas

The ground →

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