How to disable the interactivity of canvas using FabricJS?

FabricJSJavascriptHTML5 Canvas

In this article, we are going to learn how to disable the interactivity of canvas in FabricJS. The interactive layer on top of each object is one of the unique features of FabricJS. As soon as we initialize a canvas, it's possible to select the objects, drag them around or manipulate a group selection. However, all this can be undone by assigning the interactive property to False.

Syntax

new fabric.Canvas(element: HTMLElement|String, { interactive : Boolean }: Object)

Parameters

  • element − This parameter is the <canvas> element itself which can be derived using document.getElementById() or the id of the <canvas> element itself. The FabricJS canvas will be initialized on this element.

  • options (optional) − This parameter is an Object which provides additional customizations to our canvas. Using this parameter, properties such as color, cursor, border width, and a lot of other properties can be changed related to the canvas, of which interactive is a property with which we can decide whether we want an interactive canvas or not. The default value of this property is True.

Example 1

When the interactive property is enabled

When interactivity is enabled, we can drag the objects around freely, select them and manipulate them as we like. We can see that in the code example below −

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Disabling the interactivity of canvas</h2>
   <p>Here you can drag the object and manipulate them freely as we have set the <b>interactive</b> property to True. </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         interactive: true,
      });
      // Creating an instance of the fabric.Rect class
      var obj1 = new fabric.Rect({
         left: 170,
         top: 90,
         width: 60,
         height: 80,
         fill: "#966fd6",
         angle: 90,
      });
      var obj2 = new fabric.Rect({
         left: 200,
         top: 120,
         width: 60,
         height: 80,
         fill: "#ffa343",
         angle: 56,
      });
      // Adding it to the canvas
      canvas.add(obj1);
      canvas.add(obj2);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Example 2

Passing the interactive key to the class

Let's see a code example of how we can disable the interactivity of a canvas. We can assign the interactive property a False value which would get rid of the layer of interactivity on top of the objects in a canvas.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Disabling the interactivity of canvas</h2>
   <p>Here you cannot select an area around the objects and manipulate them freely, as we have set the <b>interactive</b> property as False. </b>
   </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         interactive: false,
      });
      // Creating an instance of the fabric.Rect class
      var obj1 = new fabric.Rect({
         left: 170,
         top: 90,
         width: 60,
         height: 80,
         fill: "#966fd6",
         angle: 90,
      });
      var obj2 = new fabric.Rect({
         left: 200,
         top: 120,
         width: 60,
         height: 80,
         fill: "#ffa343",
         angle: 56,
      });
      // Adding it to the canvas
      canvas.add(obj1);
      canvas.add(obj2);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>
raja
Updated on 19-May-2022 12:34:36

Advertisements