How to check if the IText object has fill using FabricJS?

FabricJS Javascript HTML5 Canvas

In this tutorial, we are going to learn about how to check if the IText object has fill using FabricJS. The IText class was introduced in FabricJS version 1.4, extends fabric.Text and is used to create IText instances. An IText instance gives us the freedom to select, cut, paste or add new text without additional configurations. There are also various supported key combinations and mouse/touch combinations which make text interactive which are not provided in Text.

Textbox, however, which is based on IText allows us to resize the text rectangle and wraps lines automatically. This is not true for IText as height is not adjusted based on the wrapping of lines. We can manipulate our IText object by using various properties. Likewise, we can check if an IText object has fill by using the hasFill method.

Syntax

hasFill()

Example 1

Using hasFill method when transparent fill is used

Let’s see a code example to see the logged output when hasFill method is used along with a transparent fill. The hasFill method returns a true value if the object has a fill colour. In this example, we have set the fill colour as “transparent”. Therefore, the logged output will be false.


<!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 hasFill method when transparent fill is used</h2>
   <p>You can open console from dev tools and see that the logged output is false</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 an itext object
      var itext = new fabric.IText(
         "Add sample text here.
Lorem ipsum dolor sit amet",{
            width: 300,
            left: 60,
            top: 70,
            fill: "transparent",
            fontStyle: "bold",
            backgroundColor: "#f8f4ff",
            stroke: "black",
         }
      );

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

      // Using the hasFill method
      console.log("The value is: ", itext.hasFill());
   </script>
</body>
</html>

Example 2

Using the hasFill method

Let’s see a code example to see the logged output when the hasFill method is used. In this case a true value will be returned since the IText object has a fill colour.


<!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 hasFill method</h2>
   <p>You can open console from dev tools and see that the 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 an itext object
         var itext = new fabric.IText(
         "Add Sample Text Here
Lorem ipsum 
dolor sit amet",{
            width: 300,
            left: 60,
            top: 70,
            fill: "#b666d2",
            fontStyle: "bold",
            backgroundColor: "#f8f4ff",
            stroke: "black",
         }
      );

      // Using the hasFill method
      console.log("The value is: ", itext.hasFill());

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

Rahul Gurung

Updated on: 12-Sep-2022

123 Views

Kickstart Your Career

Get certified by completing the course

Get Started