I've got an HTMLCanvasElement 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 canvas 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 entire image as opposed to just what's been drawn on the canvas. Is there any way to do this?

I've tried building the typical event handler for getting the mouse position, but this returns the coordinates relative to the cropped image, not the full image.

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]
}