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

Clicks on any screen size

What we are doing

The canvas is 300 pixels inside, but the page may show it bigger or smaller (on a phone, or in a wide panel). We scale the click by canvas.width / rect.width so it always lands in the right cell.

```js
// The canvas may be displayed at a different size than its 300×300 pixels, so scale the click.
const rect = canvas.getBoundingClientRect()
const x = (event.clientX - rect.left) * (canvas.width / rect.width)
const y = (event.clientY - rect.top) * (canvas.height / rect.height)
```

What it means

• rect.width is the size the canvas is shown at; canvas.width is its real size (300).
• If it is shown at 600 pixels, 300 / 600 is 0.5: a click 400 pixels in becomes 200, the right cell.
• The parentheses make the subtraction happen before the multiplication.

Your turn

Change the x and y lines as shown and add the comment line above const rect. Press Run.

Skills: Keyboard and mouse input

← Which cell was clicked? The eight winning lines →

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