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

FabricJSJavascriptHTML5 Canvas

In this tutorial, we are going to create a circle with a dash pattern border using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we will create an instance of fabric.Circle class and add it to the canvas. We can change the appearance of the dashes of border, by using the borderDashArray property. However, our circle 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.Circle({ borderDashArray: Array }: Object)

Parameters

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

<!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>Creating a circle with dash pattern border using FabricJS</h2>
         <p>Select the object and observe outline of the selection area. It will have a dashed pattern as we have applied the <b>borderDashArray</b> property. </p>
         <canvas id="canvas"></canvas>

         <script>
            // Initiate a canvas instance
            var canvas = new fabric.Canvas("canvas");
            var cir = new fabric.Circle({
               left: 215,
               top: 100,
               radius: 50,
               fill: "red",
               borderColor: "rgb(128,0,128)",
               borderDashArray: [7, 10]
            });

            // Adding it to the canvas
            canvas.add(cir);
            canvas.setWidth(document.body.scrollWidth);
            canvas.setHeight(250);
         </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 it is 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>Creating a circle with dash pattern border using FabricJS</h2>
      <p>Select the object and notice the outline of the selection area. Here we have set the <b>hasBorders</b> property to False, hence no border. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            radius: 50,
            fill: "red",
            borderColor: "rgb(128,0,128)",
            borderDashArray: [7, 10],
            hasBorders: false
         });
     
         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>
raja
Updated on 25-May-2022 08:01:52

Advertisements