fabricjs Fabricjs canvas events Fabric js canvas events Demo


Example

<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.