Workshop › Tic-tac-toe › Step 5 of 33

Finish the grid

What we are doing

The horizontal lines follow the same pattern, with x and y (and width and height) swapped. One more line in the loop finishes the 3×3 grid.

```js
for (let i = 1; i < 3; i++) {
  ctx.fillRect(i * CELL - 2, 0, 4, canvas.height)
  ctx.fillRect(0, i * CELL - 2, canvas.width, 4)
}
```

What it means

• The new line starts at the left edge (x = 0), at y = i * CELL - 2, is as wide as the board and 4 pixels tall.
• Each round of the loop now draws one vertical and one horizontal line: four lines in total.

Your turn

Inside the loop, under the vertical fillRect, add the horizontal one. Press Run.

Skills: Drawing on a canvas, Loops

← Repeat with a loop The board as a list →

All steps

1. Get the canvas and the pen
2. Paint the board
3. The first grid line
4. Repeat with a loop
5. Finish the grid
6. The board as a list
7. A function that draws
8. Write an X
9. From cell number to position
10. Draw what the board holds
11. A color for each mark
12. Make a move
13. No playing on a taken cell
14. Listen for clicks
15. Which cell was clicked?
16. Clicks on any screen size
17. The eight winning lines
18. Find three in a row
19. Win, draw or go on
20. The round ends
21. Show who won
22. Light up the winning line
23. A function for a fresh round
24. Click to play again
25. A computer that picks a cell
26. The computer answers
27. Rule one: take the center
28. Rule two: win when you can
29. Rule three: block the opponent
30. Score a finished game
31. Look ahead: minimax
32. A computer that never loses
33. Build it yourself: keep score