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

Share Follow asked Sep 29, 2015 at 10:09 Tor KlingbergTor Klingberg 5,11866 gold badges4545 silver badges5454 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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.