how to remove event listener from fabricjs canvas

Question

I am using fabricjs to build an interactive map in html5.

When the DOM loads, I add my mouseover listener to my fabricjs canvas instance by calling: *my_event_setter( true )*.

Then for the sake of testing, I want to remove the listener once I do my first mouseover by calling: *my_event_setter( false )*. That should thus remove the mouseover listener, but it does not.

my_event_setter = function( toggle )
  { var lvo =  { 'object:over' : function(e){ mouseover_handler( e ) } } ;
    toggle ? my_fabric_canvas.on( lvo ) : my_fabric_canvas.off( lvo ) ;
  } 
mouseover_handler = function( e )
  { my_event_setter( false ) ;
  } 

Answer 1

I solved this by using:

var canvas = fabric.Canvas.activeInstance;
canvas.__eventListeners["mouse:down"] = [];

The events are in an Array so it makes it easy to handle these.

Answer 2

Bind event with angular js like

$scope.closeCurve = function(){
    canvas.isDrawingMode = true;
    canvas.on('mouse:up', function() {
      canvas.getObjects().forEach(o => {
        o.fill = 'blue'
      });
      canvas.renderAll();
    });
  };

Remove event like

$scope.selectTool = function(){
    canvas.isDrawingMode = false;
    canvas.off('mouse:up');
  };

bind with on method and remove from off method...:)

Answer 3

This example shows how to remove the mousemove when mouseup is fired:

canvas.on('mouse:up', function () {
    canvas.off('mouse:move', eventHandler);
});