Workshop › Wordle-style Word Guess › Step 1 of 26

Wordle-style Word Guess: The canvas and the pen

Guess the five-letter word in six tries, with green, yellow and gray hints. Keyboard input, string handling, the scoring rules for repeated letters, an on-screen keyboard for phones and saved statistics.

What we are doing

A word game like Wordle: guess the secret five-letter word in six tries; after every guess, colours show which letters are right. Everything is drawn on the page's <canvas>, so first we find it and take its 2D drawing tools.

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

What it means

• document.getElementById('game') finds the element whose id is game; const canvas = names it.
• canvas.getContext('2d') gives the canvas's 2D drawing tools; we call them ctx.

Your turn

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

Skills: Drawing on a canvas

Paint the background →

All steps

1. The canvas and the pen
2. Paint the background
3. A function that draws
4. A row of five tiles
5. Six rows
6. Draw again and again
7. The typed letters
8. Type with the keyboard
9. Show the letters
10. Backspace
11. Leave shortcuts alone
12. A secret word
13. Right letter, right place
14. Right letter, wrong place
15. Enter sends the guess
16. Colour the guesses
17. Winning and losing
18. A message line
19. Where the keys go
20. Draw the keyboard
21. Tap a key
22. Enter and Delete keys
23. Keys that remember
24. Keep statistics
25. Show the statistics
26. Build it yourself: only real words