Disabling the snapping-grid in fabricjs

Question

I managed to snap the objects to grid using round-off.

canvas.on('object:moving', function(options) {
    options.target.set({
        left: Math.round(options.target.left / grid) * grid,
        top: Math.round(options.target.top / grid) * grid
    });
});

How do I disable this, say, on button click?

I tried using a flag isGridEnabled and doing:

canvas.on('object:moving', function(options) {
    options.target.set({
        left: options.target.left,
        top: options.target.top 
    });
});

but the object(s) still snap to grid!

Answer 1

Use .off to remove an event handler from a Fabric canvas.

I'll quote what kangax (the creator of Fabric.js) posted in a comment to a similar question:

function f(opts) {
    eventHandler(opts, arg1, arg2)
}
canvas.on('object:over', f);
canvas.off('object:over', f);

(Official docs and related Stack Overflow answer.)

Then just add an event listener to a button or other element.

el.addEventListener('click', function(){
    canvas.off('object:over', f);
});

In your case, you might refactor your code this way:

function activateGrid(options) {
    options.target.set({
        left: Math.round(options.target.left / grid) * grid,
        top: Math.round(options.target.top / grid) * grid
    });
}

onButton.addEventListener('click', function() {
    canvas.on('object:moving', activateGrid);
});

offButton.addEventListener('click', function() {
    canvas.off('object:moving', activateGrid);
});