title: scroll like a browser scroll when touchpad movement(top right left bottom) is inside canvas
body: <p>In brief, a functionality I require is a user should be able to zoom in and zoom out using trackpad(only pinch) and mouse wheel but If a user scrolls using trackpad(top, right, left, bottom) instead of zooming I need scrolling similar to when used outside canvas but with crosshair pointer inside canvas.</p>
  <p>This is the code</p>
  <pre><code>&lt;div class=&quot;canvas-container&quot;&gt;
      &lt;canvas id=&quot;c&quot; width=&quot;500&quot; height=&quot;500&quot; style=&quot;border:1px solid #ccc&quot;&gt;&lt;/canvas&gt;
      &lt;p&gt;Should scroll even if cursor is in canvas&lt;/p&gt;
      &lt;p&gt;Touch pad up down left right should scroll like a browser scroll instead of zoom in and out with crosshair cursor&lt;/p&gt;
  &lt;/div&gt;
  
  
  var canvas = new fabric.Canvas('c');
  fabric.Image.fromURL('http://i.imgur.com/8rmMZI3.jpg', function(oImg) {
    oImg.selectable = false;
    oImg.id = 'image';
    canvas.add(oImg);
  });
  canvas.on('mouse:wheel', function(opt) {
    if (opt.e.ctrlKey) {
    // pinching behavior to zoom in and out
    var delta = opt.e.deltaY;
    var pointer = canvas.getPointer(opt.e);
    var zoom = canvas.getZoom();
    zoom = zoom + delta/200;
    if (zoom &gt; 20) zoom = 20;
    if (zoom &lt; 0.01) zoom = 0.01;
    canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
    }
    opt.e.preventDefault();
    opt.e.stopPropagation();
  });
  </code></pre>
  <p>For the purpose of demo, I got this from some SO
  <a href="https://jsfiddle.net/r6mkb9wg/" rel="nofollow noreferrer">https://jsfiddle.net/r6mkb9wg/</a></p>
  <p>I tried with pointer events which works but I can't use crosshair cursor and also pinching does not work.</p>