Fabric.js is really handy with its interactive mode that allows manipulating objects like in a vector drawing program such as Inkscape. I would like to use this capacity into my web application project where a kind of collage editor is needed.

By default, when an object is selected, the bounding box and resize handles appear in blue, and the handles are big blue hollow squares. I would like to change this to match my project's design.

The documentation has a dedicated page on how to perform this type of customization here : /

Using the aforementioned guide, I am able to get selection boxes that look better into my app. But this solution is on a per-object basis. When performing a group selection using Shift key, the handles and bounding box revert back to the default blue color.

How can I achieve the same level of customization as stated in the documentation and automatically apply it to the whole canvas, including group selections?

Fabric.js is really handy with its interactive mode that allows manipulating objects like in a vector drawing program such as Inkscape. I would like to use this capacity into my web application project where a kind of collage editor is needed.

By default, when an object is selected, the bounding box and resize handles appear in blue, and the handles are big blue hollow squares. I would like to change this to match my project's design.

The documentation has a dedicated page on how to perform this type of customization here : http://fabricjs.com/customization/

Using the aforementioned guide, I am able to get selection boxes that look better into my app. But this solution is on a per-object basis. When performing a group selection using Shift key, the handles and bounding box revert back to the default blue color.

How can I achieve the same level of customization as stated in the documentation and automatically apply it to the whole canvas, including group selections?

• javascript
• customization
• fabricjs

• the link is broken. – Crashalot Commented Oct 6, 2023 at 22:38

4 Answers 4

You can override the default Object control properties globally and set them as per your preference. Here's how your code will look like:

fabric.Object.prototype.set({
    transparentCorners: false,
    borderColor: '#ff00ff',
    cornerColor: '#ff0000'
});

You can set this in the beginning of your code. This will override the default styling of controls and will be applied everywhere. You can find a working fiddle here: http://jsfiddle.net/apyeLeut/1/

You can overwrite that behavior inside object:selected event. So for example,

canvas.on('object:selected',function(e){
     e.target.transparentCorners = false;
     e.target.borderColor = 'green';
     e.target.cornerColor = 'purple';
});

FIDDLE

I'm using the fabric version 1.7.19 and I tried to do as the Swapnil JainJain answer but in my case isn't working.

As alternative, I came with this is solution:

 fabric.Object.prototype.selectionColor ='rgba(255,119,0,0.3)';
 fabric.Object.prototype.cornerSize = 20;
 fabric.Object.prototype.transparentCorners = false;
 fabric.Object.prototype.cornerColor = '#eee';

I tested on the following situations:

1. Before the document is ready;
2. After the document is ready;
3. After a button click;

In addition to the solutions above you van also override on the object:added event.

For all objects:

canvas.on("object:added", (event) => {
  event.target.set({
    transparentCorners: false,
    borderColor: "lime",
    cornerColor: "tomato"
  });
});

For specific object types:

canvas.on("object:added", (event) => {
  const object = event.target;

  switch (object.type) {
    case "circle":
    case "rect":
      object.set({
        fill: "lime",
        stroke: "tomato"
      });
      break;
    case "line":
      object.set(stroke, "tomato");
      break;
    default:
      // all other objects
      object.set(transparentCorners, false);
  }
});