How to get the opacity of Text object using FabricJS?

FabricJS Javascript HTML5 Canvas

In this tutorial, we are going to learn how to get the opacity of Text using FabricJS. We can display text on canvas by adding an instance of fabric.Text. Not only does it allow us to move, scale and change the dimensions of the text but it also provides additional functionality like text alignment, text decoration, line height which can be obtained by the properties textAlign, underline and lineHeight respectively. We can also find the opacity of an object by using the getObjectOpacity method.

Syntax

getObjectOpacity()

Example 1

Using the getObjectOpacity method

Let’s see a code example to see the logged output when the getObjectOpacity method is used. In this case, the default opacity will be displayed in the console which is 1.


<!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>Using the getObjectOpacity method</h2>
   <p>You can open console from dev tools and see that the opacity value is being displayed in the console</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 text object
      var text = new fabric.Text("Add sample
text here", {
         width: 300,
         fill: "green",
         fontWeight: "bold",
      });

      // Add it to the canvas
      canvas.add(text);

      // Using getObjectOpacity method
      console.log("The opacity is", text.getObjectOpacity());
   </script>
</body>
</html>

Example 2

Using the getObjectOpacity method and passing the opacity property

Let’s see a code example to see the logged output when the getObjectOpacity method is used in conjunction with the opacity property. In this case, the opacity of the text object has been assigned a value of 0.7 and hence the logged output will be 0.7.


<!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>Using the getObjectOpacity method and passing the opacity property</h2>
   <p>You can open console from dev tools and see that the opacity value is being displayed in the console</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 text object
      var text = new fabric.Text("Add sample
text here", {
         width: 300,
         fill: "green",
         fontWeight: "bold",
         opacity: 0.7,
      });
      
      // Add it to the canvas
      canvas.add(text);

      // Using getObjectOpacity method
      console.log("The opacity is", text.getObjectOpacity());
   </script>
</body>
</html>

Rahul Gurung

Updated on: 14-Sep-2022

88 Views

Kickstart Your Career

Get certified by completing the course

Get Started