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

The first grid line

What we are doing

The board is 3×3 cells of 100 pixels. We name the cell size CELL and draw the first grid line: a thin gray rectangle standing on the border between the first and second column.

```js
const CELL = 100

ctx.fillStyle = '#585b70'
ctx.fillRect(CELL - 2, 0, 4, canvas.height)
```

What it means

• const CELL = 100 names the cell size once, so we never repeat the number 100.
• CELL - 2 is 98: a 4 pixel line that starts 2 pixels early is centered on x = 100.
• 4, canvas.height make it 4 pixels wide and as tall as the board.

Your turn

1. Under const ctx = ... leave an empty line and write const CELL = 100.
2. At the very end, leave an empty line and write the two gray lines. Press Run.

Skills: Drawing on a canvas

← Paint the board Repeat with a loop →

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