Reputation: 5108
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.net/243kau3x/4/
Upvotes: 2
Views: 8926
Reputation: 443
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.
Upvotes: 4