Workshop › Breakout › Step 4 of 39

Follow the mouse

What we are doing

Now the paddle follows the mouse (or a finger). The pointermove event fires every time the pointer moves over the canvas; we put the paddle's middle under it.

```js
canvas.addEventListener('pointermove', (event) => {
  const rect = canvas.getBoundingClientRect()
  const x = event.clientX - rect.left
  paddle.x = clamp(x - PADDLE_W / 2, 0, canvas.width - PADDLE_W)
})
```

What it means

addEventListener('pointermove', ...) runs the arrow function every time the pointer moves over the canvas.
event.clientX is the pointer's x on the page; rect.left is where the canvas starts, so the difference is the x inside the canvas.
x - PADDLE_W / 2 puts the paddle's middle under the pointer; clamp keeps it on the screen.

Your turn

Leave an empty line under the clamp function's closing } and write the listener. Run and move the mouse over the game.

Skills: Keyboard and mouse input

← Keep a number inside limits A canvas shown at another size →

All steps