/**
 * Pointer position in canvas coordinates.
 *
 * A canvas is displayed at whatever width the layout gives it, but drawn into a
 * fixed backing store, so a click at the right-hand edge of a 400px-wide
 * element has to land at x=width, not x=400. Skipping this scaling is the
 * classic canvas bug: strokes appear offset from the cursor, worsening the
 * further from the origin you draw.
 */
export function toCanvasPoint(
  clientX: number,
  clientY: number,
  rect: { left: number; top: number; width: number; height: number },
  size: { width: number; height: number },
) {
  return {
    x: ((clientX - rect.left) / rect.width) * size.width,
    y: ((clientY - rect.top) / rect.height) * size.height,
  };
}
