在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查看该网页（以及所有代码）（已修改，因此它不会向我发送数据）。