How to get correct mouse position when using pinch zoom using HTML and JS?

Question

I have a simple HTML canvas element.

Using JavaScript I'm showing horizontal and vertical guidelines connecting under current mouse pointer position over canvas.

I was able to deal with Ctrl + + / - zoom using $window.devicePixelRatio, but now I face another problem.

When I pinch zoom on my Touch Pad, $window.devicePixelRatio is always "1", but suddenly my "crosshair" is off based on how big the zoom was.

When I click, I am not clicking where my mouse is, but the same bad position where "crosshair" is and when I move my mouse, there is some exponential movement of crosshair position (at the center of the canvas, mouse and crosshair are pretty much all right, but the more I move to one side, the bigger is the difference between "crosshair" and actual mouse position).

Everything is pretty much expected, since it was doing the same thing with Ctrl + + / - zoom before I fixed it.

My question: is there some way to translate "crosshair" position so it is actually always under the mouse pointer as well when using pinch zooming?