How to create a Text with dash pattern border using FabricJS?

In this tutorial, we are going to create a Text with a dash pattern border using FabricJS. We can display text on canvas by adding an instance of fabric.Text. Not only does it allow us to move, scale and change the dimensions of the text but it also provides additional functionality like text alignment, text decoration, line height which can be obtained by the properties textAlign, underline and lineHeight respectively. We can change the appearance of the dashes of border, by using the borderDashArray property. However, our text object must have borders in order for this property to work. If the hasBorders property is assigned a false value, this property will not work.

Syntax

new fabric.Text(text: String , { borderDashArray: Array }: Object)

Parameters

text − This parameter accepts a String which is the text string that we want to display.
options (optional) − This parameter is an Object which provides additional customizations to our text. Using this parameter colour, cursor, stroke width and a lot of other properties can be changed related to the object of which borderDashArray is a property.

Options Keys

borderDashArray − This property accepts an Array which specifies the dash pattern by stating intervals via an array. For example, if we pass an array with values [2,3], it means a dash pattern of 2px dash and 3px gap and repeating this pattern infinitely.

Example 1

Passing borderDashArray as key with a custom value

Let’s see a code example to create a dash pattern border using borderDashArray property in FabricJS. In this example, we have used a [7,10] array which tells us that the pattern will be created by drawing a 7px long line and followed by a 10px gap and repeating this same pattern over and over.


<!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 borderDashArray as key with a custom value</h2>
   <p>You can select the text to see the dash pattern</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 text object
      var text = new fabric.Text("Add Sample Text Here", {
         backgroundColor: "#ffe5b4",
         width: 200,
         top: 70,
         left: 110,
         angle: 15,
         borderColor: "red",
         borderDashArray: [7, 10],
      });

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

Example 2

Passing hasBorders key with the value “false”

As we can see in this example, even though we have assigned the properties borderColor and borderDashArray proper values, they don’t work since the hasBorders property has been set to false. When set to false, the borders of an object are not rendered.


<!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 hasBorders key with the value “false”</h2>
   <p>You can select the text to see that the borders have not been rendered</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 text object
      var text = new fabric.Text("Add Sample Text Here", {
         backgroundColor: "#ffe5b4",
         width: 200,
         top: 70,
         left: 110,
         angle: 15,
         borderColor: "red",
         borderDashArray: [7, 10],
         hasBorders: false,
      });

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