How to set the border opacity of Rectangle while moving using FabricJS?

In this tutorial, we are going to set the border opacity of a Rectangle while moving using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we will have to create an instance of fabric.Rect class and add it to the canvas.

We can change the opacity of a rectangle while moving it around in the canvas by using the borderOpacityWhenMoving property.

Syntax

new fabric.Rect({ borderOpacityWhenMoving: Number }: Object)

Parameters

Options (optional) − This parameter is an Object which provides additional customizations to our rectangle. Using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be changed related to the object of which borderOpacityWhenMoving is a property.

Options keys

borderOpacityWhenMoving − This property accepts a Number that specifies how opaque we want the borders to be while moving the rectangle around. It allows us to control the opacity of the borders while moving a rectangle object. The default value is 0.4.

Example 1

Displaying the default behaviour of borderOpacityWhenMoving property

Let’s see a code example that shows the default behaviour of boderOpacityWhenMoving property. When we select our rectangle object and move it around the canvas, the selection border changes its opacity from 1(fully opaque) to 0.4 which makes it look a bit translucent.

<!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>Displaying the default behaviour of borderOpacityWhenMoving property</h2>
   <p>Move the rectangle to see the default behaviour of <b>borderOpacityWhenMoving</b></p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         padding: 9,
         borderColor: "black",
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Example 2

Passing borderOpacityWhenMoving as key

Let’s see a code example to assign a value to the borderOpacityWhenMoving property. In this case, we have assigned the value as 0. It tells us that when we move our rectangle around, the border opacity will change to 0 and will not be visible.

<!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>Passing borderOpacityWhenMoving as key</h2>
   <p>Move the rectangle to see the change in value of <b>borderOpacityWhenMoving</b></p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         padding: 9,
         borderColor: "black",
         borderOpacityWhenMoving: 0,
      });
     
       // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>