Workshop › Sudoku › Step 9 of 28

Click to select

What we are doing

A click on a cell selects it. The click's position is turned into canvas pixels, then into a row and a column.

```js
canvas.addEventListener('pointerdown', (event) => {
  const rect = canvas.getBoundingClientRect()
  const x = ((event.clientX - rect.left) * canvas.width) / rect.width - LEFT
  const y = ((event.clientY - rect.top) * canvas.height) / rect.height
  const r = Math.floor((y - TOP) / SIZE)
  const c = Math.floor(x / SIZE)
  if (r >= 0 && r < 9 && c >= 0 && c < 9) selected = { r, c }
})
```

What it means

The canvas may be shown at a different size than its own pixels; multiplying by canvas.width / rect.width corrects it.
x is measured from the board's left edge, so Math.floor(x / SIZE) is the column; the row comes from y - TOP.
Clicks outside the board change nothing.

Your turn

Under reset, write the pointerdown listener.

Skills: Keyboard and mouse input

← The same digit everywhere Move with the arrows →

All steps