FabricJS Fluid snap to grid

http://stackoverflow.com/questions/42958368/fabricjs-fluid-snap-to-grid

by joepenzo

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>

CSS

canvas {
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

JavaScript

var canvas = new fabric.Canvas('c', {
  selection: false
});
var grid = 50;

// create grid

for (var i = 0; i < (600 / grid); i++) {
  canvas.add(new fabric.Line([i * grid, 0, i * grid, 600], {
    stroke: '#ccc',
    selectable: false
  }));
  canvas.add(new fabric.Line([0, i * grid, 600, i * grid], {
    stroke: '#ccc',
    selectable: false
  }))
}

// add objects

canvas.add(new fabric.Rect({
  left: 100,
  top: 100,
  width: 50,
  height: 50,
  fill: '#faa',
  originX: 'left',
  originY: 'top',
  centeredRotation: true
}));

canvas.add(new fabric.Circle({
  left: 300,
  top: 300,
  radius: 50,
  fill: '#9f9',
  originX: 'left',
  originY: 'top',
  centeredRotation: true
}));

// snap to grid

canvas.on('object:moving', function(options) {
  if (Math.round(options.target.left / grid * 4) % 4 == 0 &&
    Math.round(options.target.top / grid * 4) % 4 == 0) {
    options.target.set({
      left: Math.round(options.target.left / grid) * grid,
      top: Math.round(options.target.top / grid) * grid
    }).setCoords();
  }
});