How to flip a Textbox vertically using FabricJS?


In this tutorial, we are going to learn how we can flip a Textbox object vertically using FabricJS. We can customize, stretch or move around the text written in a textbox. In order to create a textbox, we will have to create an instance of fabric.Textbox class and add it to the canvas. We can flip a textbox object vertically using the flipY property.

Syntax

new fabric.Textbox(text: String, { flipY: Boolean }: Object)

Parameters

  • text − This parameter accepts a String which is the text string that we want to display inside our textbox.

  • options (optional) − This parameter is an Object which provides additional customizations to our textbox. Using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be changed related to the object of which flipY is a property.

Options Keys

  • flipY − This property accepts a Boolean value which allows us to flip an object vertically.

Example 1

Passing flipY as key with a "false" value

Let’s see a code example that shows us the default orientation of a textbox object in FabricJS. Since we are passing the flipY property a "false" value, the text will not be flipped vertically.

<!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>Passing flipY as key with a "false" value</h2>
   <p>You can see that the text has not flipped vertically</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 textbox object
      var textbox = new fabric.Textbox("Fall seven times, stand up eight.", {
         backgroundColor: "#e3dac9",
         width: 400,
         left: 70,
         top: 70,
         flipY: false,
      });

      // Create gradient fill
         textbox.set(
         "fill",
         new fabric.Gradient({
            type: "linear",
            coords: { x1: 0, y1: 0, x2: 0, y2: 100 },
            colorStops: [
               { offset: 0, color: "#545a2c" },
               { offset: 1, color: "#6495ed" },
            ],
         })
      );
      // Add it to the canvas
      canvas.add(textbox);
   </script>
</body>
</html>

Example 2

Passing the flipY property as key with a "true" value

In this example, we have a textbox object of width 200px with a vertical linear gradient fill. As we apply the flipY property to the textbox object, it flips vertically and thus we see that the gradient and the text has flipped as well.

<!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>Passing the flipY property as key with a "true" value</h2>
   <p>You can see that the text has flipped vertically</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 textbox object
      var textbox = new fabric.Textbox("Fall seven times, stand up eight.", {
         backgroundColor: "#e3dac9",
         width: 400,
         left: 70,
         top: 70,
         flipY: true,
      });

      // Create gradient fill
         textbox.set(
         "fill",
         new fabric.Gradient({
            type: "linear",
            coords: { x1: 0, y1: 0, x2: 0, y2: 100 },
            colorStops: [
               { offset: 0, color: "#545a2c" },
               { offset: 1, color: "#6495ed" },
            ],
         })
      );
      // Add it to the canvas
      canvas.add(textbox);
   </script>
</body>
</html>

Updated on: 29-Jul-2022

107 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements