title: How to get absolute mouse coordinates of full image on cropped canvas in React
body: <p>I've got an <code>HTMLCanvasElement</code> that I'm rendering in a React component that's supposed to display a map for a game. However, I don't want the entire image to be displayed on a person's screen as the map is fairly large, so I only draw a <code>canvas</code> element for part of the image at a time based on the user's position. However, when the user clicks on the map, I still want to retrieve the coordinates with respect to the <em>entire</em> image as opposed to just what's been drawn on the canvas. Is there any way to do this?</p>
  <p>I've tried building the typical event handler for getting the mouse position, but this returns the coordinates relative to the <em>cropped</em> image, not the full image.</p>
  <pre><code>function handleClick(event) {
    const canvas = event.target;
    const context = canvas.getContext('2d');
    const rect = canvas.getBoundingClientRect();
  
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
  
    return [x, y]
  }
  </code></pre>