How to implement canvas panning with Fabric.js

An easy way to pan the Fabric canvas in response to mouse movement is to calculate the cursor displacement between mouse events and pass it to relativePan.

Observe how we use the screenXsum property of the previous mouse event screenYto calculate the relative position of the current mouse event:

function startPan(event) {
  if (event.button != 2) {
    return;
  }
  var x0 = event.screenX,
      y0 = event.screenY;
  function continuePan(event) {
    var x = event.screenX,
        y = event.screenY;
    fc.relativePan({ x: x - x0, y: y - y0 });
    x0 = x;
    y0 = y;
  }
  function stopPan(event) {
    $(window).off('mousemove', continuePan);
    $(window).off('mouseup', stopPan);
  };
  $(window).mousemove(continuePan);
  $(window).mouseup(stopPan);
  $(window).contextmenu(cancelMenu);
};
function cancelMenu() {
  $(window).off('contextmenu', cancelMenu);
  return false;
}
$(canvasWrapper).mousedown(startPan);

We start panning mousedownand continue panning mousemove. In mouseup, we cancel the panning; we also cancel the mouseup-cancelling function itself.

Cancel the right-click menu (also known as the context menu) by going back false. Canceling the menu function also cancels itself. So if you then click outside the canvas wrapper, the context menu will work.

Here is the page that demonstrates this method:

http://michaellaszlo.com/so/fabric-pan/

You will see three images on the Fabric canvas (it may take a minute or two to load the images). You will be able to use standard Fabric functionality. You can left-click on images to move them, stretch them and rotate them. However, when you right-click in the canvas container, the entire Fabric canvas will be panned with the mouse.