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

Tic-tac-toe: Get the canvas and the pen

X and O on a 3×3 board. Mouse clicks, a board as an array, finding the winner, and a computer that never loses, thanks to recursion.

What we are doing

The game is drawn on a <canvas>: a 300×300 rectangle of pixels with the id game. We find it from JavaScript and ask it for its 2D context, the object that holds every drawing command.

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

What it means

• document is the page; getElementById('game') finds the element whose id is game.
• const canvas = gives what was found a name, so later lines can use it.
• canvas.getContext('2d') asks the canvas for its 2D drawing tools; we call them ctx (short for context).

Your turn

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

Skills: Drawing on a canvas

Paint the board →

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