How to trigger fabric.js “object:modified” event programmatically?

Question

I want to fire the 'object:modified' event programmatically. I already tried with "fire" and "trigger" methods.

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

canvas.on("object:modified", function (e) {
    alert("object modified");
});

var text = new fabric.Text('Text', {
  fontFamily: 'Hoefler Text',
  left: 10,
  top: 10
});

canvas.add(text);

$('.fillText').click(function(){
  text.setFill($(this).data('color'));
  canvas.renderAll();

  text.trigger('modified');
});

$('#moveText').click(function(){
  text.setLeft(50);
  text.setTop(50);
  text.setCoords();
  canvas.renderAll();

  text.trigger('modified');
});

https://jsfiddle.net/gb4u85q4/

Answer 1

You can trigger events using canvas.trigger('<eventname>', options); . fire is deprecated, so you should probably avoid using that.

Since you wanted to trigger object:modified , you can do that in the following way, while passing which object was modified:

canvas.trigger('object:modified', {target: text});

I updated your JSFiddle with the solution added to it. :) (note that I changed the alert to an console.log because I find alerts annoying, you can view the output of console.log in the developer tools, which can be opened in for example Google Chrome by pressing F12)

Answer 2

Version 4 breaking changes

Meanwhile you should use fire .

canvas.fire('object:modified');

In the observabile mixin observe , stopObserving , trigger are removed. Keep using on , off , fire . Those are shorter and also all our documentation refer to this kind of names.

For more details see Version 4 breaking changes .