Phonegap canvas touch events

Question

I have a little problem trying to draw on a canvas element with touch events. What is happening is that I recover the pageX and pageY but they seem incorrect. As you can see in the image I clicked where the red dot is but the coordinates are where the black rectangle is.

IMAGE

The code I present is not mine I've already done some code but the problem is the same, I tried it on a Lenovo Tab3 7, Xiaomi Mi5 and a Samsung S8 and the results are always the same.

So please can anyone help me with this issue?

[EDIT] As I touch from top to bottom the black pointer gets further from the touch point and then I do it to top it reaches the touching point.

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);

    }

Answer 1

Already found it.

The real problem is that I was setting width and height with CSS. There are Width and Height attributes that need to be filled.

Then just do this on touch events

function funcName(e){
   let rect = canvas.getBoundingClientRect();
   context.fillRect(e.touches[0].pageX - rect.left, e.touches[0].pageY - rect.top, 10, 10);
}

Hope my solved issue helps anyone.