Fabric (Canvas) on Mobile Devices while page scroll

Question

I observed that we are not able to scroll web page by swiping fingers on mobile devices where we have used Canvas linked to Fabric covering full screen.

problem i due to canvase not allowing page scroll how can i fix it.

url : http://dev-shree.com/sendfile/

please check in mobile view.

Is there any way to fix it .

my code for canvase defination :

(function(global) {

    "use strict";
    var canvas = new fabric.Canvas('canvas',{selection : false,controlsAboveOverlay:true,centeredScaling:true});
    var overlayimageurl = $('#myimg').val();
    canvas.setOverlayImage(overlayimageurl, canvas.renderAll.bind(canvas));
    canvas.stateful = false;

Answer 1

What Tim Hill has said is correct. allowTouchScrolling: true, seems to do nothing. If you add pointer-events: none; to upper-canvas and lower-canvas, you can affect the ability to scroll the page while touching the canvas.

Answer 2

pointer-events: none;

will disable other events on canvas

Answer 3

fabricjs canvas class has allowTouchScrolling option Indicates whether the browser can be scrolled when using a touchscreen and dragging on the canvas

var canvas = new fabric.Canvas('canvas',
    {
        selection : false,
        controlsAboveOverlay:true,
        centeredScaling:true,
        allowTouchScrolling: true
    }
);