画布触摸位置始终关闭

Question

我有一个Html 5 Canvas，它占据了屏幕宽度的100％和高度的90％（前90％）。我试图制作一个橡皮擦，当用户触摸并拖动它时，画布上的任何东西都是透明的。问题是“橡皮擦”比用户手指触摸时低约20-30px。我已经尝试过，但它没有改变。有什么想法吗？

var canvas=document.getElementById("viewport"); // grabs the canvas element
var context=canvas.getContext("2d"); // returns the 2d context object

canvas.addEventListener("touchmove", function (e) {
    e.preventDefault();
    drawPoint(e.touches[0].screenX - canvas.offsetLeft, e.touches[0].screenY - canvas.offsetTop);
}, false);


function drawPoint(x, y) {
   var canvas=document.getElementById("viewport"); // grabs the canvas element
   var context=canvas.getContext("2d"); // returns the 2d context object
   context.fillStyle = "rgba(0,0,0,1)"; // (Drawing with 0 alpha pretty much means doing nothing)
   context.globalCompositeOperation = "destination-out";
   context.beginPath();
   context.arc(x, y, 10, 0, Math.PI * 2, true);
   context.fill();
   context.closePath();
}