How to set the dash pattern of controlling corners of Ellipse using FabricJS?

FabricJSJavascriptHTML5 Canvas

In this tutorial, we are going to learn how we can implement the dash pattern of controlling corners of Ellipse using FabricJS. The controlling corners of an object allow us to scale, stretch or change its position. We can customize our controlling corners in many ways such as adding a specific color to it, changing its size etc. We can also specify a dash pattern for the controlling corners by using the cornerDashArray property.

Syntax

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

Options Keys

  • cornerDashArray − This property accepts an Array which allows us to specify a dash pattern for the controlling corners. 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 controlling corners

Let's see a code that depicts the default appearance of the controlling corners of an ellipse object. Since we have not used the cornerDashArray 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 set the dash pattern of controlling corners of Ellipse using FabricJS?</h2>
      <p>Select the object and observe the controlling corners. We have not used the <b>cornerDashArray</b> property here. </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,
            fill: "white",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            cornerColor: "rgb(255,20,147)",
         });

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

Example 2

Passing cornerDashArray property as key

In this example, we are passing the cornerDashArray property a value of [1,2,1]. This means that a dash pattern will be created such that there is a 1px long line, followed by a 2px gap, then again a 1px long line will be drawn and after which a 1px gap will be made 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 set the dash pattern of controlling corners of Ellipse using FabricJS</h2>
      <p>Select the object and observe the controlling corners. Here we have used the <b>cornerDashArray</b> property and supplied an array of integers which is why the controlling corners have a dash pattern. </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,
            fill: "white",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            cornerColor: "rgb(255,20,147)",
            cornerDashArray: [1, 2, 1],
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>
raja
Updated on 25-May-2022 08:54:23

Advertisements