Fabric.js provides a built-in selection rectangle, commonly referrred to as a marquee, for selecting objects on the canvas. Its default appearance is a semi-transparent rectangle. The framework exposes several configuraiton properties, all prefixed with selection, to modify its behavior and visual style.

Disabling Selection

By default, the canvas allows rectangular marquee selection. This functionality can be disabled by setting the selection property to false.

const canvas = new fabric.Canvas('canvasBox', {
    selection: false // Disables marquee selection
});
// Alternative method:
// canvas.selection = false;

When disabled, drag operations on the canvas will not create a selection rectangle, and objects cannot be selected via this method.

Customizing Selection Border Color

The selection rectangle's border color is controlled by the selectionBorderColor property. It accepts standard CSS color values such as color names, hexadecimal, RGB, or RGBA strings.

const canvas = new fabric.Canvas('canvasBox', {
    selectionBorderColor: '#ff0000' // Sets border color to red
});

Adjusting Border Width

The thickness of the selection rectangle's border is defined by the selectionLineWidth property. Increasing its value results in a thicker border.

const canvas = new fabric.Canvas('canvasBox', {
    selectionBorderColor: 'red',
    selectionLineWidth: 5 // Increases border thickness
});

Creating a Dashed Border

The pattern of the selection border can be changed to a dashed line using the selectionDashArray property. This property acepts an array of numbers that define the lengths of dashes and gaps.

• An array with one value, e.g., [10], creates a pattern of 10-pixel dashes and 10-pixel gaps.
• An array with two values, e.g., [10, 20], creates a pattern of 10-pixel dashes followed by 20-pixel gaps.
• Arrays with more than two values create a more complex repeating pattern.

const canvas = new fabric.Canvas('canvasBox', {
    selectionBorderColor: 'blue',
    selectionLineWidth: 2,
    selectionDashArray: [5, 15] // 5px dash, 15px gap
});

Modifying Selection Fill Color

The interior fill color of the selection rectangle is set via the selectionColor property. It also accepts standard CSS color values.

const canvas = new fabric.Canvas('canvasBox', {
    selectionColor: 'rgba(255, 192, 203, 0.3)' // Light pink fill with transparency
});

Enabling Precise Selection

By default, an object is considered selected if the selection rectangle intersects its bounding box. To require the selection rectangle to fully enclose the object's bounding box, set the selectionFullyContained property to true.

const canvas = new fabric.Canvas('canvasBox', {
    selectionFullyContained: true // Requires full enclosure for selection
});

// Example object
const triangle = new fabric.Triangle({
    top: 100,
    left: 50,
    width: 80,
    height: 100,
    fill: 'green',
});
canvas.add(triangle);

With this setting enabled, the marquee must completely surround the triangle's bounding area to select it.

Configuring the Multi-Selection Key

The key used for additive selection (adding objects to an existing selection) is configured with the selectionKey property. The default is 'shiftKey'.

• 'altKey': Uses the Alt key.
• 'shiftKey': Uses the Shift key.
• 'ctrlKey': Uses the Control key.
• null: Disables additive selection via clicking/dragging.

const canvas = new fabric.Canvas('canvasBox', {
    selectionKey: 'ctrlKey' // Use Ctrl key for multi-select
});