Snapping object to grid

by nirmaljpatel

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: 1px solid #ccc;
}

JavaScript

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

// 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
var hpoints = [150, 350, 250, 350];
var vpoints = [150, 350, 150, 450];

var hline = new fabric.Line(hpoints, {
    strokeWidth: 2,
    stroke: 'red',
    originX: 'center',
    originY: 'center',
    lockScalingY: true
});
var vline = new fabric.Line(vpoints, {
    strokeWidth: 2,
    stroke: 'blue',
    originX: 'center',
    originY: 'center',
    lockScalingX: true
});
var controlsOptions = {
    'tl': false,
        'tr': false,
        'mt': false,
        'mb': false,
        'bl': false,
        'br': false
};
hline.setControlsVisibility(controlsOptions);
vline.setControlsVisibility(controlsOptions);
canvas.add(hline, vline);

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
var fnSnapper = function (options) {
    options.target.set({
        left: Math.round(options.target.left / grid) * grid,
        top: Math.round(options.target.top / grid) * grid
    });
};
canvas.on('object:moving', fnSnapper);
canvas.on('object:modified', fnSnapper);