Workshop › Simon Says Colors › Step 19 of 27

Play with the mouse

What we are doing

A pointerdown on the canvas (mouse or finger) is turned into canvas pixels, then into a pad with padAt, and pressed. The canvas may be shown at a different place and size on the page, so we subtract where it starts and scale.

```js
canvas.addEventListener('pointerdown', (event) => {
  const rect = canvas.getBoundingClientRect()
  const x = ((event.clientX - rect.left) * canvas.width) / rect.width
  const y = ((event.clientY - rect.top) * canvas.height) / rect.height
  const pad = padAt(x, y)
  if (pad >= 0) press(pad)
})
```

What it means

• pointerdown fires when the canvas is pressed with a mouse or a finger.
• getBoundingClientRect() gives where the canvas is on the page and how big it is shown.
• Subtract its left/top, then scale by canvas.width / rect.width: now x, y are canvas pixels.
• pad >= 0 skips clicks on the text strip.

Your turn

Under padAt, leave an empty line and write the pointerdown listener, right above the keydown listener.

Skills: Keyboard and mouse input

← Which pad is at a point? Progress and mistakes →

All steps

1. Get the canvas and the pen
2. A dark board
3. The first pad
4. Two colors for every pad
5. All four pads
6. A function that draws
7. Light a pad
8. Draw again and again
9. The sequence to remember
10. Show the round
11. Light a pad for a while
12. Go dark again
13. The computer shows a pad
14. Show the whole sequence
15. Watch, then your turn
16. Check each press
17. Play with the keyboard
18. Which pad is at a point?
19. Play with the mouse
20. Progress and mistakes
21. A function for a new game
22. Click to retry
23. Light up when pressed
24. Faster and faster
25. Save the best score
26. Show the best score
27. Build it yourself: no dawdling