Tengo un HTMLCanvasElement que estoy representando en un componente React que se supone que muestra un mapa para un juego. Sin embargo, no quiero que se muestre la imagen completa en la pantalla de una persona, ya que el mapa es bastante grande, así que solo dibujo un elemento de canvas para una parte de la imagen a la vez según la posición del usuario. Sin embargo, cuando el usuario hace clic en el mapa, todavía quiero recuperar las coordenadas con respecto a la imagen completa en lugar de solo lo que se dibujó en el lienzo. ¿Hay alguna manera de hacer esto?

Intenté construir el controlador de eventos típico para obtener la posición del mouse, pero esto devuelve las coordenadas relativas a la imagen recortada , no la imagen completa.

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