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


In this tutorial, we are going to learn about how to create a Line with a dash pattern border using FabricJS. A Line element is one of the basic elements provided in FabricJS. It is used for creating straight lines. Because line elements are geometrically one-dimensional and do not contain an interior, they are never filled. We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas.

In order to change the appearance of the dashes of border we use the borderDashArray property. However, our line 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.Line( points: Array , { borderDashArray: Array }: Object) 

Parameters

  • points − This parameter accepts an Array of points which determines the (x1, y1) and (x2, y2) values, those being the x- and y-axis coordinates of the start and end of the line respectively.

  • options (optional) − This parameter is an Object which provides additional customizations to our object. Using this parameter origin, 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.

Passing borderDashArray as key with a custom value

Example

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 line object 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 Line object var line = new fabric.Line([200, 100, 100, 40], { stroke: "blue", strokeWidth: 20, borderDashArray: [7, 10], }); // Add it to the canvas canvas.add(line); </script> </body> </html>

Passing hasBorders key with the value “false”

Example

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 line object to see the dash pattern is not visible </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 Line object var line = new fabric.Line([200, 100, 100, 40], { stroke: "blue", strokeWidth: 20, borderDashArray: [7, 10], hasBorders: false, }); // Add it to the canvas canvas.add(line); </script> </body> </html>

Updated on: 20-Oct-2022

222 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements