How to create an Ellipse with dash pattern border using FabricJS?


In this tutorial, we are going to create an ellipse with a dash pattern border using FabricJS. Ellipse is one of the various shapes provided by FabricJS. In order to create an ellipse, we have to create an instance of fabric.Ellipse class and add it to the canvas. We can change the appearance of the dashes of the border, by using the borderDashArray property. However, our ellipse 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

How to create an Ellipse with dash pattern border using FabricJS?

new fabric.Ellipse({ borderDashArray: Array }: Object)

Parameters

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

The following code demonstrates how 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 an Ellipse with a dash pattern border using FabricJS</h2>
      <p>Select the object to see its dash pattern purple border.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 215,
            top: 100,
            rx: 90,
            ry: 50,
            fill: "red",
            borderColor: "rgb(128,0,128)",
            borderDashArray: [7, 10],
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         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 with 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 will not get 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 an Ellipse with a dash pattern border using FabricJS</h2>
      <p>Select the object. You will notice there are no outline borders as we have set the <b>hasBorders</b> property to False. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 215,
            top: 100,
            rx: 90,
            ry: 50,
            fill: "red",
            borderColor: "rgb(128,0,128)",
            borderDashArray: [7, 10],
            hasBorders: false,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Updated on: 24-May-2022

108 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements