Workshop › Pool › Step 26 of 33

Press to aim

What we are doing

A press on the table aims with pull. The page may show the canvas smaller or larger than 480×340, so toCanvas turns the event's position into canvas pixels. After a win, a press starts a new game.

```js
function toCanvas(event) {
  const rect = canvas.getBoundingClientRect()
  return {
    x: ((event.clientX - rect.left) * canvas.width) / rect.width,
    y: ((event.clientY - rect.top) * canvas.height) / rect.height,
  }
}

canvas.addEventListener('pointerdown', (event) => {
  if (state === 'won') return reset()
  if (state !== 'aiming') return
  pull(toCanvas(event))
})
```

What it means

getBoundingClientRect() tells where the canvas is on screen and how big it is shown; the position is scaled by canvas.width / rect.width.
pointerdown works for mouse, pen and finger. Won: new game. Rolling: nothing. Aiming: pull.

Your turn

Above the pull comment write toCanvas, with an empty line after it.
Under pull, leave an empty line and write the pointerdown listener.

Skills: Keyboard and mouse input

← A slingshot Pull back and let go →

All steps