Tengo un elemento de lienzo HTML simple.

Usando JavaScript, muestro pautas horizontales y verticales que se conectan bajo la posición actual del puntero del mouse sobre el lienzo.

Pude manejar Ctrl + + / - zoom usando $window.devicePixelRatio , pero ahora me enfrento a otro problema.

Cuando pellizco el zoom en mi panel táctil, $window.devicePixelRatio siempre es "1", pero de repente mi "punto de mira" está apagado según el tamaño del zoom.

Cuando hago clic, no estoy haciendo clic donde está mi mouse, sino en la misma mala posición donde está el "punto de mira" y cuando muevo el mouse, hay un movimiento exponencial de la posición del punto de mira (en el centro del lienzo, el mouse y el punto de mira están bastante bien, pero cuanto más me muevo hacia un lado, mayor es la diferencia entre el "punto de mira" y la posición real del mouse).

Todo es bastante esperado, ya que estaba haciendo lo mismo con Ctrl + + / - zoom antes de que lo arreglara.

Mi pregunta : ¿hay alguna forma de traducir la posición de "punto de mira" para que en realidad siempre esté debajo del puntero del mouse cuando se usa el zoom de pellizco?