Workshop › Breakout › Step 5 of 39
On a phone or a big screen the canvas may be shown smaller or larger than 480 pixels. We scale the pointer position so the paddle still ends up under the finger.
```js
// Convert page coordinates to canvas pixels (the canvas may be displayed scaled).
const rect = canvas.getBoundingClientRect()
const x = (event.clientX - rect.left) * (canvas.width / rect.width)
```rect.width is the width the canvas is displayed at; canvas.width is its real width (480).canvas.width / rect.width is the scale: 0.5 when it is shown twice as big.In the pointermove listener, add the comment above const rect and change the const x line as shown.
Skills: Keyboard and mouse input
← Follow the mouse A ball with a velocity →