Add Shadow to a Textbox Using Fabric.js

In this tutorial, we are going to learn how to add a shadow to a Textbox 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. Our textbox object can be customized in various ways like changing its dimensions, adding a background color, or even adding a shadow to it. We can add a shadow to the textbox by using the shadow property.

Syntax

new fabric.Textbox(text: String, { shadow : fabric.Shadow }: 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 colour, cursor, stroke width and a lot of other properties can be changed related to the object of which shadow is a property.

Options Keys

  • shadow This property accepts a fabric.Shadow object which allows us to add a shadow to our Textbox object. For example, in order to add a shadow to our Textbox object we need to create a new instance of fabric.Shadow and then assign that instance to shadow property.

Example 1

Passing the shadow object to the shadow property

Let’s see a code example to understand how we can assign the shadow property a value such that a shadow is added to our textbox object. Firstly, we need to make a new instance of fabric.Shadow and then assign that instance to our shadow property.

Open Compiler
<!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 shadow object to the shadow property</h2>
   <p>You can see that a blue shadow has been added to the textbox</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 shadow instance
      var shadow = new fabric.Shadow({
         color: "blue",
         blur: 20,
      });

      // Initiate a textbox object
      var textbox = new fabric.Textbox("Try Again. Fail again. Fail better.", {
         backgroundColor: "#fffff0",
         width: 400,
         left: 110,
         top: 70,
         fill: "violet",
         strokeWidth: 2,
         stroke: "blue",
         textAlign: "center",
         shadow: shadow,
      });

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

Example 2

Passing an RGBA value to the shadow object

We can also adjust the shadow and give it a blurred out appearance by assigning it an RGBA value which stands for red, green, blue and alpha. Alpha determines the opacity of the colour.

Open Compiler
<!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 an RGBA value to the shadow object</h2>
   <p>You can see the shadow created using RGBA colour value</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 shadow instance
      var shadow = new fabric.Shadow({
         color: "rgba(0,0,205, 0.7)",
         blur: 20,
      });

      // Initiate a textbox object
      var textbox = new fabric.Textbox("Try Again. Fail again. Fail better.", {
         backgroundColor: "#fffff0",
         width: 400,
         left: 110,
         top: 70,
         fill: "violet",
         strokeWidth: 2,
         stroke: "blue",
         textAlign: "center",
         shadow: shadow,
      });

      // Add it to the canvas
      canvas.add(textbox);
   </script>
</body>
</html>
Updated on: 2022-07-29T12:00:42+05:30

739 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements