How to add stroke to a Textbox using FabricJS?

In this tutorial, we are going to learn how to add stroke 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 colour, or by changing the colour of the line drawn around the object. We can do this by using the stroke property.

Syntax

new fabric.Textbox(text: String, { stroke : String }: 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 stroke is a property.

Options Keys

stroke − This property accepts a String which determines the colour of that object's border.

Example 1

Passing stroke as key with a hexadecimal value

Let’s see a code example to understand how our textbox object appears when the stroke property is used. A hexadecimal colour code starts with a # followed by a six-digit number representing a colour. In this case, we have used “#800000” which is the colour maroon.

<!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 stroke as key with a hexadecimal value</h2>
   <p>You can see that the stroke around the text is of maroon colour</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("When nothing goes right, go left!", {
         backgroundColor: "#e3dac9",
         width: 400,
         top: 70,
         left: 65,
         fill: "green",
         stroke: "#800000",
      });

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

Example 2

Passing an RGBA value to the stroke property

In this example we will see how to assign an RGBA value to the stroke property. We can use an RGBA value, instead of a hexadecimal colour code, which stands for − red, green, blue, and alpha. The alpha parameter specifies the opacity of a 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>Passing an RGBA value to the stroke property</h2>
   <p>You can see that the stroke colour is coming from the RGBA value now</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("When nothing goes right, go left!", {
         backgroundColor: "#e3dac9",
         width: 400,
         top: 70,
         left: 65,
         fill: "green",
         stroke: "rgb(339,100,27)",
      });

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