Here is a fabric.js example with a canvas and a rectangle, with a mouse down handler on each:

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

var rect = new fabric.Rect({ 
  left: 100, 
  top: 100, 
  width: 50, 
  height: 50, 
  fill: '#faa', 
})

canvas.add(rect);

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

rect.on('mousedown', function(options) {
  console.log('rect event');
});

Why does it need to be mouse:down on the canvas, but mousedown on the rectangle? If I change either, they stop working. Is the mousedown not actually a fabric event, and if so, should the handler function be different?

JsFiddle: /

Here is a fabric.js example with a canvas and a rectangle, with a mouse down handler on each:

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

var rect = new fabric.Rect({ 
  left: 100, 
  top: 100, 
  width: 50, 
  height: 50, 
  fill: '#faa', 
})

canvas.add(rect);

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

rect.on('mousedown', function(options) {
  console.log('rect event');
});

Why does it need to be mouse:down on the canvas, but mousedown on the rectangle? If I change either, they stop working. Is the mousedown not actually a fabric event, and if so, should the handler function be different?

JsFiddle: http://jsfiddle/243kau3x/4/

• javascript
• fabricjs
• mousedown

1 Answer 1

They are both fabric js events. The main difference is the type of instances to which the events are attached.
mouse:down is a event specific for the fabric Canvas instance while mousedown is specific to a fabric Object instance, in your case a rect.

There are different types of events that can be listened on a Canvas and on an Object instance. The full list of available events is available on fabric js official site.

The events specific to the Canvas instance are presented in detail on the library official GitHub page in this post.