The canvas.interactive Property in Fabric.js

The interactive property controls whether the Fabric.js canvas responds to user interactions. According to the official documentation:

Indicates that canvas is interactive. This property should not be changed.

By default, canvas.interactive is set to true. While the documentation recommends against modifying this value, understanding its behavior is still valuable.

Practical Demonstrasion

Let's examine what happens when interactive is set to false.

Create a canvas and add a rectangle to it:

<canvas id="canvasElement" width="400" height="400" style="border: 1px solid #ccc;"></canvas>

<script>
  let canvas = new fabric.Canvas('canvasElement', {
    interactive: false
  })

  let rectangle = new fabric.Rect({
    top: 80,
    left: 80,
    width: 80,
    height: 80,
    fill: '#e74c3c'
  })

  canvas.add(rectangle)
</script>

The result shows that when an element is selected, the default control handles do not appear. However, the element can still be manipulated for scaling and rotation (though locating the rotation handle requires some guessing).

This behavior explains why the documentation advises against changing the interactive property—it creates an inconsistent user experience.

Comparison with hasControls and hasBorders

The hasControls and hasBorders properties are configured on individual objects, not on the canvas itself.

Setting hasControls to false removes the control handles when an object is selected.

Setting hasBorders to false removes the border around the selected object.

<canvas id="canvasElement" width="400" height="400" style="border: 1px solid #ccc;"></canvas>

<script>
  let canvas = new fabric.Canvas('canvasElement')

  let rectangle = new fabric.Rect({
    top: 80,
    left: 80,
    width: 80,
    height: 80,
    fill: '#e74c3c',
    hasControls: false,
    hasBorders: false
  })

  canvas.add(rectangle)
</script>

With both properties set to false, the object remains movable but cannot be scaled or rotated, and no visual handles or borders appear.

Comparison with StaticCanvas

For scenarios where interactivity is not needed, Fabric.js provides StaticCanvas as an alternative to creating a non-interactive canvas.

Simply replace new fabric.Canvas with new fabric.StaticCanvas:

<canvas id="canvasElement" width="400" height="400" style="border: 1px solid #ccc;"></canvas>

<script>
  let canvas = new fabric.StaticCanvas('canvasElement')

  let rectangle = new fabric.Rect({
    top: 80,
    left: 80,
    width: 80,
    height: 80,
    fill: '#e74c3c'
  })

  canvas.add(rectangle)
</script>

A canvas created with StaticCanvas prevents objects from being selected or manipulated entirely.

In contrast, setting interactive to false still allows manipulation of objects, just without visible control handles.

Key Differences

1. Setting interactive to false: Objects can be manipulated (moved, rotated, scaled), but control handles and borders are hidden.

2. Setting hasControls and hasBorders to false on objects: Objects can be moved but cannot be rotated or scaled, and control handles and border are hidden.

3. Using StaticCanvas: Objects cannot be selected, moved, or manipulated in any way.