Getting the correct coordinates of a canvas touch event

Question

I am facing problems getting the correct coordinate of touch event. This is my markup

<div class="board">
<canvas width="595" height="595" id="bgCanvas"></canvas>
<canvas width="595" height="595" id="liCanvas"></canvas>
</div>

The CSS

.board{
 width:595px;
 height:595px;  
 position:absolute;
 display:block;
 left:21px;
 top:230px;
}
.board canvas{
position:absolute;
}

and the code, note that I have I already added touch event listener to liCanvas

evX= ev.targetTouches[0].pageX- liCanvas.offsetLeft

but I'm not getting the right value, I mean I want evX=0 when I touch on the upper left corner of the canvas. Please help me

what value are you getting? – bugwheels94 Jun 18 '13 at 09:36 — bugwheels94, Jun 18 '13 at 09:36
i'm getting 11 for evX,116 for evY. – Lamia Mehreen Jun 18 '13 at 09:40 — Lamia Mehreen, Jun 18 '13 at 09:40

score 7 · Answer 1 · answered Jun 28 '18 at 09:53

The accepted solution work when arborescence is simple, but for some cases (mine for example) when there can be multiple nested scrolling parents it won't work as intended.

Another solution which work in every cases I have see so far is to use

var rect = canvas.getBoundingClientRect();
evX = ev.targetTouches[0].pageX - rect.left,

score 5 · Accepted Answer · edited May 23 '17 at 12:28

5

offsetLeft gives the position of element with respect to your board but you want it with respect to body so use the code given below

function getOffsetLeft( elem )
{
    var offsetLeft = 0;
    do {
      if ( !isNaN( elem.offsetLeft ) )
      {
          offsetLeft += elem.offsetLeft;
      }
    } while( elem = elem.offsetParent );
    return offsetLeft;
}

evX= ev.targetTouches[0].pageX- getOffsetLeft(liCanvas);

Reference

edited May 23 '17 at 12:28

Community

1
1

answered Jun 18 '13 at 09:48

bugwheels94

30,681
3
39
60

1

Thank you very very much Ankit..I was stuck there for the last four days – Lamia Mehreen Jun 19 '13 at 08:53
@LamiaMehreen if it really helped you then you can accept it by ticking the mark at the left side of answer – bugwheels94 Jun 19 '13 at 09:54
pardon I did tick the arrow but it didnt work properly.. sorry didnt notice – Lamia Mehreen Jun 19 '13 at 11:04

score 2 · Answer 3 · answered Oct 16 '22 at 16:24

I think you should use getBoundingClientRect and clientX and clientY (instead of pageX and pageY) to extract the event coordinates and offset coordinates. Because they are all relative to the viewport, the event coordinates on the canvas can be correctly computed.

For the source code and the demo, please check out my example.

Getting the correct coordinates of a canvas touch event

3 Answers3