line drawn is not under the finger on touch screens

Question

I have added touch events to my drawing routine at: https://www.barnwellmd.com/PainDiagram/Testdrawing.html (modified so it doesn't send data to me). You can view page source, then click on script type="text/javascript" src="PainDiagram.js" to view the js script.

However, sometimes when drawing on a touch screen, the line drawn is not under the finger. For example:

I have tested the routine on a: Pixel Phone, Iphone, Samsung tablet, Microsoft Surface Book. The routine always draws at the wrong place using the Pixel Phone. The others frequently (not always) draws at the wrong place when zoomed in to and scrolled down on the page. Zooming and scrolling is disabled on the image itself but you can zoom and scroll off the image.

I believe this is the code causing the problem:

if( ev.targetTouches ) {
    var rect = ev.target.getBoundingClientRect();

    ev._x = ev.targetTouches[0].pageX - rect.left;
    ev._y = ev.targetTouches[0].pageY - rect.top;
}

I tried changing:

var rect = ev.target.getBoundingClientRect();

to:

var rect = canvas.getBoundingClientRect();

where canvas is defined as:

canvas = document.getElementById('imageView');

But that did not work.

I will appreciate and try any suggestion even if your not sure if it will work.

Thanks!