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.

This is the code

<div class="canvas-container">
    <canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>
    <p>Should scroll even if cursor is in canvas</p>
    <p>Touch pad up down left right should scroll like a browser scroll instead of zoom in and out with crosshair cursor</p>
</div>


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 > 20) zoom = 20;
  if (zoom < 0.01) zoom = 0.01;
  canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
  }
  opt.e.preventDefault();
  opt.e.stopPropagation();
});

For the purpose of demo, I got this from some SO https://jsfiddle.net/r6mkb9wg/

I tried with pointer events which works but I can't use crosshair cursor and also pinching does not work.