Recording touch coordinates in canvas animations

Question

I'm making this mini-game in HTML5 canvas using javascript's requestAnimationFrame.

 function animate() {
  frame = requestAnimationFrame( animate );
  render();
 }

It's destined to be a Cordova application, so I have to record touch input. The game starts when the screen is pressed

 document.addEventListener('touchstart',run);

It stops when the finger is removed.

I'm now looking for a way to record the touch's x and y coordinates, in order to display the finger's position smoothly on the screen.

So I was thinking about getting the x and y coordinates, and making an arc on this place in the render() function

But how could I permanently get these coordinates, or is there another way of doing this?

Thanks!!

Answer 1

You can refer this..

Is there an equivalent to e.PageX position for 'touchstart' event as there is for click event?

 $(document).on('touchstart', 'body', function(e) {
      var xPos = e.originalEvent.touches[0].pageX;
     var yPos = e.originalEvent.touches[0].pageY;
    });