Why doesn't paper.js path creation work on iOS devices?

Question

** See Edit 2 for the current solution to this issue. **

I have a somewhat obscure issue that Google and searching through StackOverflow hasn't solved yet. Paper.js isn't working through iOS.

Currently I'm building a whiteboard drawing web-app that utilizes paper.js for the drawing functionality. It's working just fine on the desktop in Chrome, FireFox, and Safari. On Android devices it works fine, but is quite laggy. The problem crops up when using the app on iOS devices.

For some reason it is not possible for my app to create paths when using it on iOS through mobile Safari or mobile Chrome. The behavior on iOS is just a non-responsive canvas.

I currently don't have access to a device that I can use for remote debugging, so I am not able to gather any useful debugging data.

Web app link for testing. http://alexpersian.github.io/html/whiteboard.html

Code snippet of paperscript involved in drawing.

var myPath;

function onMouseDown(event) {
    myPath = new Path();
    myPath.add(event.point);
    myPath.strokeColor = WBAPP.penColor; // WBAPP is from main Javascript
    myPath.strokeWidth = WBAPP.penStroke;
    myPath.strokeCap = 'round';
}

function onMouseDrag(event) {
    myPath.add(event.point);
}

function onMouseUp(event) {
    myPath.simplify();
}

Edit: I've completed some further testing and found that it works on devices running iOS 7, but not iOS 8. I'm curious if there was a change to iOS 8 that limited touchEvents web interaction.

Edit 2: I was able to solve this issue by adding this snippet of code.

document.addEventListener('touchmove', function(event) {
    event.preventDefault();
}, false);

This prevents the default touch action on iOS 8, which seems to be a scroll/pan action, because it interferes with the onMouseDrag event from paper.js.

Jürg Lehni, paper.js co-creator, is looking into whether this should be included in the library itself. Until then, this snippet should help.

Answer 1

Hey probably you will need to implement touch events you can use http://labs.rampinteractive.co.uk/touchSwipe/demos/ to do that or http://www.homeandlearn.co.uk/JS/html5_canvas_touch_events.html