Как исправить проблему смещения указателя мыши на холсте в полноэкранном режиме HTML5?

Я использую полноэкранный API HTML5 для масштабирования этого письма до полноэкранного режима браузера. .

Подпишитесь на https://bubbleideas.com/letters/html5-full_screen-api, чтобы ознакомиться с демонстрацией и шаги для воспроизведения.

Кажется, проблема/ошибка связана с тем, как браузер возвращает (x, y) значение местоположения указателя мыши. В полноэкранном режиме при прокрутке вниз вводится смещение между указателем мыши и нарисованным путем.

Вот шаги, чтобы воспроизвести проблему. (перейдите по приведенной выше демонстрационной ссылке)

1. Нажмите на кнопку в правой верхней части этой страницы.

2. Нажмите на инструмент рисования «Свободная рука» справа внизу. Откроется панель канцелярских принадлежностей (выберите инструмент «Перо» или «Карандаш»).

3. Нарисуйте пару раз в области рисования

4. Теперь прокрутите немного вниз и попробуйте рисовать той же ручкой. Вы заметите, что между положением указателя мыши и начерченным путем есть зазор/смещение (это проблема). В идеале в полноэкранном режиме тоже не должно быть разрыва

Кто-нибудь был здесь раньше? Также обратите внимание, что это прекрасно работает для других фигур, таких как квадрат, круг и треугольник, без смещения.

ОБНОВЛЕНИЕ: (как спросил «Ифтах» в комментарии ниже). В соответствии с тканью 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);
    });
});