Линия, нарисованная на холсте HTML5, не находится под пальцем на сенсорных экранах

Question

Иногда при рисовании на сенсорном экране нарисованная линия не находится под пальцем. Посмотрите на это изображение для примера: https://www.barnwellmd.com/PainDiagram/drawing_problem_image.png Я проверил эту процедуру на: Pixel Phone, Iphone, планшете Samsung, Microsoft Surface Book. Рутина всегда рисует не в том месте, используя Pixel Phone. Другие часто (не всегда) рисуют не в том месте, когда увеличивают и прокручивают страницу вниз. Масштабирование и прокрутка на самом изображении отключены, но вы можете масштабировать и прокручивать изображение.

Я считаю, что это код, вызывающий проблему:

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

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

Я пытался изменить:

var rect = ev.target.getBoundingClientRect();

до:

var rect = canvas.getBoundingClientRect();

где холст определяется как:

canvas = document.getElementById('imageView');

Но это не сработало.

Я буду признателен и попробую любое предложение, даже если вы не уверены, сработает ли оно.

Спасибо!

Вы можете просмотреть веб-страницу (и весь код) по адресу https://www.barnwellmd.com/PainDiagram/Testdrawing.html (изменено, поэтому данные мне не отправляются).