Pointer Coordinate Dot

A canvas pointer handler translates click coordinates into canvas space and paints a dot at that position.

Program

Pointer events report viewport coordinates. Canvas drawing code often subtracts the canvas rectangle to get local coordinates.

pointer_coordinate_dot.html

<canvas id="pad" width="320" height="180"></canvas>
<script>
  const pad = document.querySelector("#pad");
  const ctx = pad.getContext("2d");
  pad.addEventListener("pointerdown", event => {
    const rect = pad.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    ctx.beginPath();
    ctx.arc(x, y, 8, 0, Math.PI * 2);
    ctx.fill();
  });
</script>

pointerdown pointerdown fires when a mouse, pen, or touch pointer presses the element.

canvas coordinates Canvas drawing uses local coordinates inside the canvas bitmap.