Workshop › Klondike Solitaire › Step 18 of 40

Tap the stock

What we are doing

A tap (or click) on the stock turns a card over. pointerdown works for mouse, pen and finger. The page may show the canvas smaller or larger than 480×560, so toCanvas turns the event's position into canvas pixels.

```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) => {
  const p = toCanvas(event)
  const h = hit(p.x, p.y)
  if (!h) return
  if (h.key === 'stock') return flipStock()
})
```

What it means

getBoundingClientRect() tells where the canvas is on the screen and how big it is shown.
event.clientX - rect.left is the distance from the canvas's left edge in screen pixels; times canvas.width / rect.width it becomes canvas pixels.
The listener finds what was hit; nothing means return; on the stock it turns a card over.

Your turn

Above the keydown listener write toCanvas and the pointerdown listener. Run and click the stock.

Skills: Keyboard and mouse input

← Hitting a card in a column Rule 1: building a column →

All steps