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

FabricJS Javascript HTML5 Canvas

In this tutorial, we are going to learn about how to check if the IText object has stroke 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 stroke by using the hasStroke method.

Syntax

hasStroke()

Example 1

Using hasStroke method when transparent stroke is used

Let’s see a code example to see the logged output in IText object when hasStroke method is used along with transparent stroke. The hasStroke method returns a true value if the object has a stroke colour. Since, in this case, we have assigned stroke property the value as “transparent”, 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 hasStroke method when transparent stroke is used</h2>
   <p>You can open console from dev tools and see that the value being displayed in the console 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: "#b666d2",
            fontStyle: "bold",
            backgroundColor: "#f8f4ff",
            stroke: "transparent",
         }
      );

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

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

Example 2

Using the hasStroke method

Let’s see a code example to see the logged output when the hasStroke method is used. In this case, a true value will be returned since the IText object has a stroke 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 hasStroke 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 hasStroke method
      console.log("The value is: ", itext.hasStroke());

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

Rahul Gurung

Updated on: 12-Sep-2022

97 Views

Kickstart Your Career

Get certified by completing the course

Get Started