如何修复HTML5全屏模式下画布上鼠标指针的偏移问题

我正在使用HTML5 full_screen API将这个字母放大到浏览器的全屏模式。

按照https://bubbleideas.com/letters/html5-full_screen-api获取演示和复制步骤。

浏览器返回鼠标指针位置的(x,y)值的方式似乎有问题/错误。在全屏模式下，当你向下滚动时，鼠标指针和潦草的路径之间会引入偏移量。

以下是重现该问题的步骤。(到上面的演示链接)

1. 点击本页右上方的按钮

2. 点击右下角的"Free hand"绘图工具。它将打开一个文具面板(选择钢笔或铅笔工具)

3. 在绘图区域涂鸦几次

4. 现在向下滚动一点，试着用同样的笔涂鸦。您将注意到在鼠标指针位置和潦草的路径之间存在间隙/偏移(这就是问题所在)。理想情况下，在全屏模式下应该没有间隙

有人来过这里吗?还需要注意的是，这对于其他形状，如正方形、圆形和三角形，没有任何偏移，效果也很好。

更新:(根据"Iftah"在下面的评论中提出的要求)根据fabric js，我使用calcOffset()重新计算每次鼠标向下的偏移量。至于其他函数，我们是这样做的。希望这能给你一些启发

$("#rectangle-function").click(function (evt1) {
doCanvasUp();
initObjectDrawing();
//canvas.isDrawingMode = true;
canvas1 = document.createElement("canvas");
canvas1.height = canvas.height;
canvas1.width = canvas.width;
canvas1.id = "dummy-canvas";
canvas1.style.zIndex = 998;
canvas1.style.position = "absolute";
$(".page-body").prepend(canvas1);
$("#dummy-canvas").mousedown(function (evt) {
    var context1 = canvas1.getContext("2d");
    var offset = $("#dummy-canvas").offset();
    startX = evt.pageX - offset.left;
    startY = evt.pageY - offset.top;
    context1.beginPath();
    $("#dummy-canvas").mousemove(function (event) {
        context1.clearRect(0, 0, canvas1.width, canvas1.height);
        context1.strokeStyle = "#ff0000";
        context1.lineWidth = 1;
        context1.moveTo(startX, startY);
        var offset1 = $("#dummy-canvas").offset();
        var x = event.pageX - offset1.left;
        var y = event.pageY - offset1.top;
        var diffX = x - startX;
        var diffY = y - startY;
        context1.strokeRect(startX, startY, diffX, diffY);
        context1.closePath();
        context1.beginPath();
    }).mouseup(function (eventf) {
        $("#dummy-canvas").unbind('mousemove');
        $("#dummy-canvas").unbind('mouseup');
        var offset = $("#dummy-canvas").offset();
        //$("#dummy-canvas").remove();
        context1.clearRect(0, 0, canvas1.width, canvas1.height);
        var endX = eventf.pageX - offset.left;
        var endY = eventf.pageY - offset.top;
        var diffX = endX - startX;
        var diffY = endY - startY;
        var rect = new fabric.Rect({
            left: startX + diffX * 0.5,
            top: startY + diffY * 0.5,
            width: diffX,
            height: diffY,
            opacity: 1,
            fill: null,
            stroke: color
        });
        canvas.add(rect);
    });
});