How to check if an IText object has a particular style property using FabricJS?

FabricJS Javascript HTML5 Canvas

In this tutorial, we are going to learn about how to check if an IText object has a particular style property 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 a particular style property by using the styleHas method.

Syntax

styleHas(property: String, lineIndex: Number): Boolean

Parameters

property − This parameter accepts a String which denotes the property for which the check has to be made.
ineIndex − This parameter accepts a Number which denotes an index where the style is to be checked.

Example 1

Using the styleHas method

Let’s see a code example to see the logged output when the styleHas method is used. In this case, we are checking if the fill property is present for a character in the 0th line index. Since the value is present, a true value is returned in the console.


<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <scrip src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Using the styleHas method</h2>
   <p>You can open console from dev tools and see that a true 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 ", {
         width: 300,
         left: 50,
         top: 70,
         fontSize: 30,
         fill: "red",
         backgroundColor: "#fedad2",
         angle: 25,
         styles: {
            0: {
               1: {
                  fill: "blue",
                  fontStyle: "bold",
               },
            },
         },
      });

      // Using the styleHas method
      console.log("Is fill property present? : ", itext.styleHas("fill", 0));

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

Example 2

Using the styleHas method to check for a value that is not present

Let’s see a code example to see how the logged output looks like when the styleHas method is used to check for a value that is not present. In this case, we are checking whether the fontSize property is present for a character in the 0th line. Since it is not present, a false value is returned.


<!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 styleHas method to check for a value that is not present</h2>
   <p>You can open console from dev tools and see that a false 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 ", {
         width: 300,
         left: 50,
         top: 70,
         fontSize: 30,
         fill: "red",
         backgroundColor: "#fedad2",
         angle: 25,
         styles: {
            0: {
               1: {
                  fill: "blue",
                  fontStyle: "bold",
               },
            },
         },
      });

      // Using the styleHas method
      console.log(
         "Is font size property present? : ",
          itext.styleHas("fontSize", 0)
      );

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

Rahul Gurung

Updated on: 12-Sep-2022

124 Views

Kickstart Your Career

Get certified by completing the course

Get Started