Skip to content

Configuring controls

Configuring control handles

FabricJS object’s controls have a default configuration that is defined by the control classes and objects’ defaults. Those properties listed here Object Props and here Border Props are the one influencing controls:

  /**
   * Size of object's controlling corners (in pixels)
   * @type Number
   * @default 13
   */
  cornerSize: number;


  /**
   * Size of object's controlling corners when touch interaction is detected
   * @type Number
   * @default 24
   */
  touchCornerSize: number;


  /**
   * When true, object's controlling corners are rendered as transparent inside (i.e. stroke instead of fill)
   * @type Boolean
   * @default true
   */
  transparentCorners: boolean;


  /**
   * Color of controlling corners of an object (when it's active)
   * @type String
   * @default rgb(178,204,255)
   */
  cornerColor: string;


  /**
   * Color of controlling corners of an object (when it's active and transparentCorners false)
   * @since 1.6.2
   * @type String
   * @default ''
   */
  cornerStrokeColor: string;


  /**
   * Specify style of control, 'rect' or 'circle'
   * This is deprecated. In the future there will be a standard control render
   * And you can swap it with one of the alternative proposed with the control api
   * @since 1.6.2
   * @type 'rect' | 'circle'
   * @default 'rect'
   * @deprecated
   */
  cornerStyle: 'rect' | 'circle';


  /**
   * Array specifying dash pattern of an object's control (hasBorder must be true)
   * @since 1.6.2
   * @type Array | null
   * @default null
   */
  cornerDashArray: number[] | null;


  /**
   * Padding between object and its controlling borders (in pixels)
   * @type Number
   * @default 0
   */
  padding: number;


  /**
   * Color of controlling borders of an object (when it's active)
   * @type String
   * @default rgb(178,204,255)
   */
  borderColor: string;


  /**
   * Array specifying dash pattern of an object's borders (hasBorder must be true)
   * @since 1.6.2
   * @type Array | null
   * default null;
   */
  borderDashArray: number[] | null;


  /**
   * When set to `false`, object's controlling borders are not rendered
   * @type Boolean
   * @default
   */
  hasBorders: boolean;


  /**
   * Opacity of object's controlling borders when object is active and moving
   * @type Number
   * @default 0.4
   */
  borderOpacityWhenMoving: number;


  /**
   * Scale factor of object's controlling borders
   * bigger number will make a thicker border
   * border is 1, so this is basically a border thickness
   * since there is no way to change the border itself.
   * @type Number
   * @default 1
   */
  borderScaleFactor: number;

Those have default values that makes the controls looks like this:

Now let’s change some of those basic properties. Comment and change properties in the example below to see the effect:

Configuring control defaults for every object

Now doing this for every object requires you to pass the options every single object creation, you can create a function to do so or you can change FabricJS default values.

Configuring default controls set for different objects

Now if you have to add extra or different controls for objects, you know you can append a control to the controls object. The controls object on your object is created by the constructor and is different for every instance, this avoids unexpected mutation side effects.

If this is not of your liking you can also just change the output of the createControls static function:

This setup is still giving you separate controls objects for every object to avoid mutation side effects. The above example is probably the best approach if you are looking for a set and forget type of setup.

You can go deeper with sharing and side effects if you need. If you prefer to have shared controls among instances, you have to act on the defaults again. This will let you configure the controls once for all class types, and let you add controls globally at runtime.

Each setup comes with pros and cons that depends on your personal preference and project’s functionalities. For this snippet you have to press the runMe button. Once you run it, the above snippets are affected too.

You can add and delete controls globally on all objects, this means that every object share the same control set. There is no way to edit a single object at this point without swapping the control set entirely. You can have premade controlsets that you swap depending on your needs.

You can also create your own entirely custom controls, for more information look the example here: