fabric.ext

An extension of fabricjs. Intends to implement objects and events missed in fabricjs.

How to use

Reference the fabric.canvasex.js in your html:

<script src="scripts/fabric.canvasex.js"></script>

Create a canvasex object and use it:

Events

<script>
  var canvas = new fabric.CanvasEx('c');
  canvas.on('mouse:dblclick', function (options) {
    console.log('mouse:dblclick');
  });
  
  var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 300,
    height: 300
  });
  
  rect.on('object:dblclick', function (options) {
    console.log('object:dblclick');
  });
  
  canvas.add(rect);
</script>

Supported Events and Objects:

Events

canvas:

// Double click
canvas.on('mouse:dblclick', function (options) {
});

// Mouse right button down
canvas.on('mouse:down', function (options) {
  if (options.e.which === 3) {
    console.log('Canvas right mouse down.');
  }
});

object:

// Double click
rect.on('object:dblclick', function (options) {
});

// Mouse right button down
rect.on('mousedown', function (options) {
  if (options.e.which === 3) {
    console.log('Object right mouse down.');
  }
});

Event for objects inside a group

By default, any object inside a group will not recieve any event individually. Add below line of code if you want group objects recieve events individually.

canvas.fireEventForObjectInsideGroup = true;