Working with events

See event inspector demo.

Fabric exposes a number of events to allow for extensibility and decoupled functionality. To subscribe to events of particular canvas instance, use its on method. If you wish to fire an event on a canvas, use its fire method.

Note that events are always scoped per canvas instance, so they don't conflict with those of others. Clicking on canvas fires "mouse:down" and "mouse:up" on that exact canvas instance; clicking on another canvas fires events on that canvas instance.

The list of currently-existing events is as follows:

General

• after:render — fired continuously after each frame is rendered
• before:render — fired before each frame is rendered
• canvas:cleared — fired after a call to canvas.clear()

Mouse related

• mouse:down — fired when mousedown event occurred on canvas
• mouse:up — fired when mouseup event occurred on canvas
• mouse:moved — fired when the mouse is moving over the canvas

Object related

• object:added — fired after object has been added
• object:modified — fired after object is modified (moved, scaled, rotated)
• object:moving — fired continuously during object movement
• object:over — fired when mouse is over object (see example below)
• object:out — fired when mouse is moved away from object (see example below)
• object:removed — fired when object has been removed
• object:rotating — fired continuously during object rotating
• object:scaling — fired continuously during object scaling
• object:selected — fired when object is selected

Path related

• path:created — fired when (free-drawn) path is created

Selection related

• before:selection:cleared — fired before selection is cleared (before active group is destroyed)
• selection:cleared — fired after selection is cleared (after active group is destroyed)
• selection:created — fired after selection is created (after active group is created)

Example

// Outputting object's coordinates (in console's log) every time object is moved

var canvas = new fabric.Element('my-canvas');
...
canvas.on('object:moving', function(e) {
  var activeObject = e.target;
  console.log(activeObject.get('left'), activeObject.get('top'));
});

// piggyback on `canvas.findTarget`, to fire "object:over" and "object:out" events
canvas.findTarget = (function(originalFn) {
  return function() {
    var target = originalFn.apply(this, arguments);
    if (target) {
      if (this._hoveredTarget !== target) {
        canvas.fire('object:over', { target: target });
        if (this._hoveredTarget) {
          canvas.fire('object:out', { target: this._hoveredTarget });
        }
        this._hoveredTarget = target;
      }
    }
    else if (this._hoveredTarget) {
      canvas.fire('object:out', { target: this._hoveredTarget });
      this._hoveredTarget = null;
    }
    return target;
  };
})(canvas.findTarget);

//piggyback on mouseup for object mouseup
main.canvas._onMouseUp = (function(originalFn) {
	return function(e) {
		_this = main.canvas;
		_this.__onMouseUp(e);
		if (_this.getActiveObject()) {
			_this.fire('object:mouseup', { target: _this.getActiveObject() }, e);	
		}
        	removeListener(fabric.document, 'mouseup', _this._onMouseUp);
        	fabric.isTouchSupported && removeListener(fabric.document, 'touchend', _this._onMouseUp);
       		removeListener(fabric.document, 'mousemove', _this._onMouseMove);
        	fabric.isTouchSupported && removeListener(fabric.document, 'touchmove', _this._onMouseMove);
        	addListener(_this.upperCanvasEl, 'mousemove', _this._onMouseMove);
       		fabric.isTouchSupported && addListener(_this.upperCanvasEl, 'touchmove', _this._onMouseMove);
	};
})(main.canvas.setActiveObject);