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

FabricJSJavascriptHTML5 Canvas

In this tutorial, we are going to learn how we can implement the dash pattern of controlling corners of Circle 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 colour 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.Circle({ cornerDashArray: 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 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 an example that depicts the default appearance of the controlling corners of a circle 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>Setting dash pattern of controlling corners of circle using FabricJS</h2>
      <p>Select the object and notice its controlling corners. Here we have not applied the <b>cornerDashArray</b> property, hence there is no dashed pattern. </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,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            cornerColor: "rgb(255,20,147)"
         });

         // Adding it to the canvas
         canvas.add(cir);
         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, 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>Setting dash pattern of controlling corners of circle using FabricJS</h2>
      <p>Select the object and notice the dashed pattern of its controlling corners. Here we have applied the <b>cornerDashArray</b> property and assigned it an array [1,2,1]. </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,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            cornerColor: "rgb(255,20,147)",
            cornerDashArray: [1, 2, 1]
         });

         // 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 13:39:57

Advertisements