Fabric.js right mouse click

Solution 1:

NOTE: Most answers above are outdated; this answer applies to the latest Fabric version 2.7.0

Simply enable firing right/middle click events for your Fabric canvas

The config for firing right-click and middle-click events in the canvas can be found here for fireRightClick and here for fireMiddleClick and are set to false by default. This means right and middle click events are by default disabled. The parameter stopContextMenu for stopping the context menu to show up on the canvas when right-clicking can be found here

You can enable these simply by setting the values when creating your canvas:

var canvas = new fabric.Canvas('canvas', {
  height: height,
  width: width,
  fireRightClick: true,  // <-- enable firing of right click events
  fireMiddleClick: true, // <-- enable firing of middle click events
  stopContextMenu: true, // <--  prevent context menu from showing
});

Now your mousedown the event will fire for all clicks and you can distinguish them by using the button identifier on the event:

For canvas:

canvas.on('mouse:down', (event) => {
    if(event.button === 1) {
        console.log("left click");
    }
    if(event.button === 2) {
        console.log("middle click");
    }
    if(event.button === 3) {
        console.log("right click");
    }
}

For objects:

object.on('mousedown', (event) => {
    if(event.button === 1) {
        console.log("left click");
    }
    if(event.button === 2) {
        console.log("middle click");
    }
    if(event.button === 3) {
        console.log("right click");
    }
}

When clicking on objects you can reach the "real" mouse dom event through event.e:

if(event.button === 3){
  console.log(event.e);
}

Solution 2:

I've implemented right-click by extending the fabric. Canvas class. Take a look here at the _onMouseDown method.

Basically, the right mouse-down event for an object was disabled in fabrics by default.

Solution 3:

If you want to handle the right clicks (on canvas or its objects), then set the context menu listener on the upper-canvas element. Using the canvas method to find the target you can check if any target was clicked and if so, you can check the type of the target.

let scope = this;
jQuery(".upper-canvas").on('contextmenu', function (options: any) {
    let target: any = scope.canvas.findTarget(options, false);
    if (target) {
        let type: string = target.type;
        if (type === "group") {
            console.log('right click on group');
        } else {
            scope.canvas.setActiveObject(target);
            console.log('right click on target, type: ' + type);
        }
    } else {
        scope.canvas.discardActiveObject();
        scope.canvas.discardActiveGroup();
        scope.canvas.renderAll();
        console.log('right click on canvas');
    }
    options.preventDefault();
});