javascript - How can I define event handlers in a Fabric.js subclass? -

i have following subclass of rect in fabric.js. adds image rect.

var irect = fabric.util.createclass(fabric.rect, {     type: 'irect',     initialize: function(options) {         options || (options = { });         this.callsuper('initialize', options);     },      fromobject: function (object, callback) {         return new irect(object);     },      toobject: function() {         return fabric.util.object.extend(this.callsuper('toobject'), {});     },      _render: function(ctx) {         this.callsuper('_render', ctx);         var c = document.getelementbyid('canvas');         var img = document.getelementbyid('info');         c.getcontext('2d').drawimage(img, -this.width/2, -this.height/2);      } }); 

i want define specific event handlers irect. instance, when user clicks on irect, want alert('hello'). should in subclass ? how can reference canvas while defining subclass ?

code , problem description can found at: http://jsfiddle.net/czcsj2fw/5/

i had same problem , found way it. i'm not sure correct way (i'm still new fabricjs!) seem work, @ least trivial case. canvas isn't defined in initialise, defined in _render, if set event handling code in there should work :).

it looks :

_render: function(ctx) {     this.callsuper('_render', ctx);     // custom rendering code goes here ...      this.canvas.on('mouse:down', function(e) {         console.log('mouse down ' + e);     }); } 

i updated jsfiddle demonstrate, logs mouse clicks (mouse:down event) console (you several events fired 1 click alert pretty annoying - reckon can stop cancelbubble or keep simple haven't bothered example) - http://jsfiddle.net/czcsj2fw/6/

hth!