canvas clicker & normalising coords

gistfile1.txt

(() => {
  const canvas = document.querySelector("canvas");
  if (!canvas) {
    console.warn("⚠️ No <canvas> found in page.");
    return;
  }

  canvas.addEventListener("click", (e) => {
    const rect = canvas.getBoundingClientRect();

    // Raw click coordinates relative to canvas
    const rawX = e.clientX - rect.left;
    const rawY = e.clientY - rect.top;

    // Normalize based on the internal resolution of the canvas
    const normalizedX = rawX / rect.width;
    const normalizedY = rawY / rect.height;

    console.log(
      `Click at (raw): x=${rawX.toFixed(2)}, y=${rawY.toFixed(2)} | (normalized): {"x": ${normalizedX.toFixed(4)}, "y": ${normalizedY.toFixed(4)}}`
    );
  });

  console.log("✅ Listener with normalization added. Click on the canvas to log coordinates.");
})();