How to change default appearance of Fabric.js resize handles?

Question

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?

Answer 1

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/

Answer 2

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

Answer 3

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;

Answer 4

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);
  }
});