События касания холста телефонной связи

У меня небольшая проблема с попыткой нарисовать элемент холста с сенсорными событиями. Что происходит, так это то, что я восстанавливаю pageX и pageY, но они кажутся неправильными. Как вы можете видеть на изображении, я щелкнул там, где находится красная точка, но координаты находятся там, где находится черный прямоугольник.

ИЗОБРАЖЕНИЕ

Код, который я представляю, не мой. Я уже написал код, но проблема та же. Я пробовал его на Lenovo Tab3 7, Xiaomi Mi5 и Samsung S8, и результаты всегда одинаковы.

Так что, пожалуйста, может ли кто-нибудь помочь мне с этой проблемой?

[РЕДАКТИРОВАТЬ] Когда я касаюсь сверху вниз, черный указатель удаляется от точки касания, а затем я делаю это сверху, и он достигает точки касания.

var can, ctx, canX, canY, mouseIsDown = 0;



    function init() {

        can = document.getElementById("canvas");

        ctx = can.getContext("2d");



        can.addEventListener("mousedown", mouseDown, false);

        can.addEventListener("mousemove", mouseXY, false);

        can.addEventListener("touchstart", touchDown, false);

        can.addEventListener("touchmove", touchXY, true);

        can.addEventListener("touchend", touchUp, false);



        document.body.addEventListener("mouseup", mouseUp, false);

        document.body.addEventListener("touchcancel", touchUp, false);

    }



    function mouseUp() {

        mouseIsDown = 0;

        mouseXY();

    }



    function touchUp() {

        mouseIsDown = 0;

        // no touch to track, so just show state

        showPos();

    }



    function mouseDown() {

        mouseIsDown = 1;

        mouseXY();

    }



    function touchDown() {

        mouseIsDown = 1;

        touchXY();

    }



    function mouseXY(e) {

        if (!e)

            var e = event;

        canX = e.pageX - can.offsetLeft;

        canY = e.pageY - can.offsetTop;

        showPos();

    }



    function touchXY(e) {

        if (!e)

            var e = event;

        e.preventDefault();

        canX = e.targetTouches[0].pageX - can.offsetLeft;

        canY = e.targetTouches[0].pageY - can.offsetTop;

        showPos();

    }



    function showPos() {

        // large, centered, bright green text

        ctx.font = "24pt Helvetica";

        ctx.textAlign = "center";

        ctx.textBaseline = "middle";

        ctx.fillStyle = "rgb(64,255,64)";

        var str = canX + ", " + canY;

        if (mouseIsDown)

            str += " down";

        if (!mouseIsDown)

            str += " up";

        ctx.clearRect(0, 0, can.width, can.height);

        // draw text at center, max length to fit on canvas

        ctx.fillText(str, can.width / 2, can.height / 2, can.width - 10);

        // plot cursor

        ctx.fillStyle = "black";

        ctx.fillRect(canX -5, canY -5, 10, 10);

    }