https://jayreddinjr-jr-odysseus-hf.hf.space/static/js/editor/canvas-coords.js

1/**
2 * Convert a pointer event's client coordinates into the canvas's
3 * internal pixel coordinates, accounting for current display scale.
4 *
5 * Handles both mouse and the first finger of a touch event.
6 *
7 * @param {MouseEvent|TouchEvent} e
8 * @param {HTMLCanvasElement} canvas
9 * @returns {{x: number, y: number}}
10 */
11export function canvasCoords(e, canvas) {
12  const rect = canvas.getBoundingClientRect();
13  const scaleX = canvas.width / rect.width;
14  const scaleY = canvas.height / rect.height;
15  const clientX = e.touches ? e.touches[0].clientX : e.clientX;
16  const clientY = e.touches ? e.touches[0].clientY : e.clientY;
17  return {
18    x: (clientX - rect.left) * scaleX,
19    y: (clientY - rect.top) * scaleY,
20  };
21}