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

A row of five tiles

What we are doing

A guess is five letters, so a row has five tiles. A for loop draws them, each SIZE + GAP pixels to the right of the last, with the row centered. Empty tiles are only outlines.

```js
const SIZE = 56 // one letter tile
const GAP = 6
const LEFT = (canvas.width - 5 * SIZE - 4 * GAP) / 2
const TOP = 12

  for (let i = 0; i < 5; i++) {
    const x = LEFT + i * (SIZE + GAP)
    const y = TOP
    ctx.strokeStyle = '#3f3f46'
    ctx.lineWidth = 2
    ctx.strokeRect(x + 1, y + 1, SIZE - 2, SIZE - 2)
  }
```

What it means

• A tile is 56 pixels with 6 pixels between tiles. Five tiles and four gaps are 304 pixels; LEFT is half of what is left of the 360: 28.
• for (let i = 0; i < 5; i++) repeats with i = 0, 1, 2, 3, 4.
• Tile i is i * (SIZE + GAP) to the right of LEFT.
• strokeRect draws only the border of a rectangle (fillRect fills it); strokeStyle and lineWidth pick its colour and thickness. It is drawn 1 pixel inside the tile, so the 2-pixel border stays inside.

Your turn

1. Under const ctx = ..., leave an empty line and write the four size lines.
2. In draw, under the fillRect line, leave an empty line and write the loop. Press Run.

Skills: Drawing on a canvas, Loops

← A function that draws Six rows →

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