Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to move an object to the top of the stack of drawn objects in IText using FabricJS?

FabricJS Javascript HTML5 Canvas

In this tutorial, we are going to learn about how to move an object to the top of the stack of drawn objects in IText 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 move an object to the top of the stack of drawn objects by using the bringToFront method.

Syntax

bringToFront(): fabric.Object

Understanding Z-Index in FabricJS

In FabricJS, objects are rendered in a stack order. Objects added later appear on top of previously added objects. The bringToFront() method moves an object to the highest position in this stack, making it visible above all other objects.

Example 1: Without using bringToFront method

Let's see a code example to see how the IText objects behave when the bringToFront method is not used. In this case, we have initialized two IText objects namely itext1 and itext2. You can notice that the second text is covering the first text, hiding it behind.

<!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>Without using the bringToFront method</h2>
   <p> You can see that the first itext object is hidden behind the second itext object </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 itext1 = new fabric.IText("First itext object.", {
         width: 300,
         left: 110,
         top: 70,
         fill: "#b666d2",
         fontStyle: "bold",
         backgroundColor: "#f8f4ff",
      });

      // Initiate another itext object
      var itext2 = new fabric.IText("Second itext object.", {
         width: 300,
         left: 130,
         top: 90,
         fill: "white",
         backgroundColor: "#c8a2c8",
      });

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

Example 2: Using bringToFront method

Let's see a code example to see how the IText objects behave when the bringToFront method is used. In this case, our itext1 object will now be at the top of the stack and hence it will no longer be hidden behind itext2.

<!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 bringToFront method</h2>
   <p> You can see that the first itext object is no longer hidden behind the second itext object </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 itext1 = new fabric.IText("First itext object.", {
         width: 300,
         left: 110,
         top: 70,
         fill: "#b666d2",
         fontStyle: "bold",
         backgroundColor: "#f8f4ff",
      });

      // Initiate another itext object
      var itext2 = new fabric.IText("Second itext object.", {
         width: 300,
         left: 130,
         top: 90,
         fill: "white",
         backgroundColor: "#c8a2c8",
      });
      
      // Add it to the canvas
      canvas.add(itext1);
      canvas.add(itext2);

      // Using the bringToFront method
      itext1.bringToFront();
   </script>
</body>
</html>

Key Points

  • Objects in FabricJS are rendered in stack order (z-index)
  • The bringToFront() method moves an object to the topmost layer
  • This method is useful for managing overlapping objects
  • Other related methods include sendToBack(), bringForward(), and sendBackwards()

Conclusion

The bringToFront() method is essential for controlling object layering in FabricJS. It ensures that important objects remain visible by moving them to the top of the rendering stack.

Updated on: 2026-03-15T23:19:00+05:30

951 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements