How Can I Get E.offsetx On Mobile/ipad

There was no offsetX in e.touches[0] when I tried on iPad. Does anyone know where I can get this value of offsetX?

Solution 1:

The correct answer based on the comments in the suggested answer:

e.offsetX = e.touches[0].pageX - e.touches[0].target.offsetLeft;     e.offsetY = e.touches[0].pageY - e.touches[0].target.offsetTop;

This ignores any transformations such as rotations or scaling. Also be sure to check if there are any touches.

Solution 2:

You can use clientX or pageX, see here

Solution 3:

Thanks, @Kontiki - this is the solution that finally fixed things for me:

if("touchmove" == e.type)
{

    letr = canvas.getBoundingClientRect();
    currX = e.touches[0].clientX - r.left;
    currY = e.touches[0].clientY - r.top;
}
else
{
    currX = e.offsetX;
    currY = e.offsetY;
}

Solution 4:

The page - offset / client approach did not work for me. There was still an offset. I found this other solution that works perfectly:

let r = canvas.getBoundingClientRect();

let x = e.touches[0].pageX - r.left;
let y = e.touches[0].pageY - r.top;

Solution 5:

Was having similar issue on binding event-handler using jQuery's .on function on canvas element (Don't know the reason).

I resolved it by binding event-handler using addEventListener. The event object in the handler has offsetX and offsetY defined with proper values.

Hope it helps...