Fabricjs canvas events

Syntax#

on(eventName, handler) - Attaches an event listener with a callback to the object.
off(eventName, handler) - Remove the event listener from the object. Calling this function witout any arguments will remove all event listeners on the object.
trigger(eventName, optionsopt) - Fires the event and optional options object.

Parameters#

Parameter	Description
`eventName`	The name of the event you want to subscribe such as ‘object:moving’
`eventHandler`	The function you want to execute when that particluar event is triggered
`optionsopt`	Options object
## Remarks#
Fabric supports a number of events to allow for interactivity and extensibility. In order to subscribe to events for a canvas use the `on` method the way its used in jQuery. And you wish to manually trigger any event use the `trigger` method. All the events are within the scope of a particular canvas instance. Visit Link for more information on events

Fabric js canvas events Demo

<canvas id="c" width="400" height="400"></canvas>

var canvas = new fabric.Canvas("c");

canvas.on('mouse:up', function () {
  console.log('Event mouse:up Triggered');
});

canvas.on('mouse:down', function () {
  console.log('Event mouse:down Triggered');
});

canvas.on('after:render', function () {
  console.log('Event after:render Triggered');
});

canvas.on('object:moving', function () {
  console.log('Event object:moving Triggered');
});

canvas.on('object:modified', function () {
  console.log('Event object:modified Triggered');
});

var text = new fabric.Textbox('Hello world', {
  width:250,
  cursorColor :"blue"
});
canvas.add(text);

The code above displays how the event API in Fabric.js works. By calling on on the canvas instance, or even on the Fabric.js other objects, such as Rect instance, you can listen to their events and when the listeners are triggered, the callback you passed to them will be triggered as well.