Sketch.js Pagex Undefined Error

I am using sketch.js by intridea in my phonegap application.It works allright with the modification case 'touchstart': if (this.painting) {//add this.

Solution 1:

It seems as if everyone has swtiched over to jqscribbel.js, but to directly answer this question with sketch.js, you need to check if e.originalEvent.targetTouches[0] is defined. I haven't dug into sketch.js too much yet, but it seems that when a touchup event is triggered, e.originalEvent.targetTouches[0] is no longer defined, so trying to find .pageX of undefined gives an error. This error causes the entire canvas to be re-drawn, so you cannot draw more than 1 sketch on the canvas. To fix this error, simply add find the following two lines of code (around line 100/101):

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

and replace with

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 !==undefined){
    e.pageY = e.originalEvent.targetTouches[0].pageY;
}