如何使用html5 canvas处理触摸事件？

Question

I have created the painting based feature with html5 canvas. When it comes to the desktop it's working as I expected, but the problem only in touch devices. I'm clueless where is the issues are coming from. Can someone help me to fix this one? I'm struggling with past two days.

My code

if(windowWidth <= 1024) {
  canvas2.addEventListener('touchmove', function(e) {
      mouse.x = e.pageX;
      mouse.y = e.pageY;
      handlerPos.x = e.pageX;
      handlerPos.y = e.pageY;
  }, false);
} else {
  canvas2.addEventListener('mousemove', function(e) {
    mouse.x = e.pageX;
    mouse.y = e.pageY;
    handlerPos.x = e.pageX;
    handlerPos.y = e.pageY;
  }, false);
}

Answer 1

Maybe you are looking for this

Unfortunately, all was not well. An issue arose from a conflict with built-in browser gestures. When I moved my finger on the canvas, I wanted the page to stay still so I could draw. However, if my page had horizontal or vertical scrolling (and it did) the page would move along with my finger and making proper drawing impossible. After some frustration, I stumbled upon the solution: preventing scrolling on document.body if the target of a touch event is the canvas.

http://bencentra.com/code/2014/12/05/html5-canvas-touch-events.html

document.body.addEventListener('touchmove', function(e) {
   mouse.x = e.pageX;
   mouse.y = e.pageY;
   handlerPos.x = e.pageX;
   handlerPos.y = e.pageY;
}, false);