How to add dashed stroke to an Ellipse using FabricJS?



In this tutorial, we are going to learn how to add a dashed stroke to an Ellipse using FabricJS. Ellipse is one of the various shapes provided by FabricJS. In order to create an ellipse, we will create an instance of fabric.Ellipse class and add it to the canvas. The strokeDashArray property allows us to specify a dash pattern for the object's stroke.

Syntax

new fabric.Ellipse( { strokeDashArray: 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 strokeDashArray is a property.

Options Keys

  • strokeDashArray − This option is an Array which is used to define the pattern of the dash. 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

Default appearance of an object's stroke

Let's see an example that depicts the default appearance of the stroke of an ellipse object. Since we have not used the strokeDashArray property, there is no dash pattern being displayed.

<!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>How to add dashed stroke to an Ellipse using FabricJS?</h2>
      <p>This is the default appearance. No dashed strokes here, as we have not used the <b>strokeDashArray</b> property. </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: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ffdead",
            stroke: "#cd853f",
            strokeWidth: 7,
         });
         
         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Example 2

Passing strokeDashArray property as key

In this example, we are passing the strokeDashArray property with a value of [9,2]. This means that a dashed pattern will be created in such a way that there will be a 9px long line followed by a 2px gap, then again a 9px long line will be drawn and so on.

<!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>How to add dashed stroke to an Ellipse using FabricJS?</h2>
      <p>Observe the dashed strokes, 9px long lines followed by 2px gaps.</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: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ffdead",
            stroke: "#cd853f",
            strokeWidth: 7,
            strokeDashArray: [9, 2],
         });
         
         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Advertisements