Canvas drawing for mobile web pages with sketch.js resets ontouch

Question

I am using the sketch.js plugin to draw on HTML5 canvas. Although it works great on desktop computers, it seems to have problems with mobile browsers.

The problem is that if I draw two different shapes, the canvas will be reset blank as soon as I touch it.

Just to be completely clear, I will make an example : drawing the number "12" first draws "1", and then when I start drawing "2", the canvas will be cleared and save only the number '2' ...

 <!-- CANVAS --> <canvas id="canvas1" style="width:100%; background:white; height:150px;"></canvas> <script type="text/javascript"> $(function () { $('#canvas1').sketch(); }); </script> 

It is he. I am wondering if there is any workaround to keep the history of various drawings. I am open to any suggestion or know if you found a similar problem.

Answer 1

To fix this error, you need to change several different lines of code. The plugin checks during each event if the user uses the desktop (mousedown, mousemove, mouseleave, mouseup) or mobile (touchstart, touchhend, touchcancel). To determine the position of the mouse / finger to draw the next point, jQuery e.pageX . This is directly defined on the mobile phone, so the plugin checks for the presence of a mobile phone and detects the mobile connection, while maintaining the user's finger position determined by e.originalEvent.targetTouches[0].pageX . The problem arises from touchhend or touchcancel because e.originalEvent.targetTouches[0] not defined for these two events, therefore e.originalEvent.targetTouches[0].pageX returns an error and the entire canvas is redrawn. To fix this, you need to edit 2 lines of code around line 100/101.

Replace

 e.pageX = e.originalEvent.targetTouches[0].pageX; e.pageY = e.originalEvent.targetTouches[0].pageY; 

FROM

 if (e.originalEvent.targetTouches[0] !== undefined && e.originalEvent.targetTouches[0].pageX!==undefined){ e.pageX = e.originalEvent.targetTouches[0].pageX; } if (e.originalEvent.targetTouches[0] !== undefined &&e.originalEvent.targetTouches[0].pageY){ e.pageY = e.originalEvent.targetTouches[0].pageY; } 

See below for more details.

Sketch.js pageX undefined error

Answer 2

See the workaround provided by leonth here: https://github.com/intridea/sketch.js/issues/1

I made jsFiddle with a workaround, and now it works for me on mobile devices: http://jsfiddle.net/ezanker/4hfkb/5/

 switch (e.type) { case 'mousedown': case 'touchstart': if (this.painting) { //add this.stopPainting(); //add } //add this.startPainting(); break; ...