Enable mobile scroll gesture on paperjs canvas lement

Question

I have developed a web app that uses paper.js library in order to display some basic drawing shapes.

My problem is that when viewed on a smartphone, the webpage cannot be scrolled up or down, with the scrolling gestures when applied upon the canvas element. I have also tried with an empty canvas element of the same size, without using paper.js to instantiate it and it works correctly. So paperjs is responsible after handling the canvas for disabling the event for scrolling with gestures. Please note that I am not using any event listeners for mouse events on the canvas of paperjs.

Thanks

Answer 1

I am providing the solution I found to my Github issue at that time, in case it helps some people:

Hi, after a lot of inspecting through the code, I found the source of the issue. In paper-core.js in line 10451 (version 0.9.22), the canvas element is added some predefined css styles. One of them is touchAction which is set to none. So in case you do not need any interactive functionality on the canvas element, and still want to enable drag on mobile devices, you should set this property manually to "", which is the default... In order to do that I simply call this function on my canvas element after setting up paper on javascript:

function(el){
    /*
        This function will accept the canvas html element and enable css drag that was originally disabled in paper.js for canvas that we do not need functionality and want mouse drag on
     */
    var name = 'touchAction';//the property that needs enabling for drag to work
    if (name in el.style) {
        el.style[name] = '';
    }
}