Disable Panning Viewport

http://stackoverflow.com/questions/42484028/fabricjs-disable-panning-viewport-x-y-axis

by 20yco

HTML

<button onclick="togglePanning()">Turn Panning ON</button>
<canvas id="c" width="400" height="400"></canvas>

CSS

#c {
  border: 1px solid red;
}

button {
  margin-bottom: 10px;
}

JavaScript

var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
  radius: 20,
  fill: 'green',
  left: 180,
  top: 100
});
var triangle = new fabric.Triangle({
  fill: 'green',
  left: 150,
  top: 170
});
canvas.add(circle, triangle);
canvas.renderAll();
var panning = false;
var isPaningMode = false;
canvas.on('mouse:up', function(e) {
  if (isPaningMode) {
    panning = false;
  }
});
canvas.on('mouse:out', function(e) {
  if (isPaningMode) {
    panning = false;
  }
});
canvas.on('mouse:down', function(e) {
  if (isPaningMode) {
    panning = true;
  }
});
canvas.on('mouse:move', function(e) {
  canvas.selection = !isPaningMode;
  if (isPaningMode && e && e.e && panning) {
    var delta = new fabric.Point(e.e.movementX, e.e.movementY);
    canvas.relativePan(delta);
  }
});
togglePanning = function() {
  isPaningMode = !isPaningMode;
  canvas.selection = !isPaningMode;
  canvas.defaultCursor = 'default';
  document.getElementsByTagName('button')[0].innerHTML = 'Turn Panning ON';
  if (isPaningMode) {
    document.getElementsByTagName('button')[0].innerHTML = 'Turn Panning OFF';
    canvas.defaultCursor = 'move';
  }
};