How to set the scale factor (border) of an Ellipse using FabricJS?

In this tutorial, we are going to set the scale factor (border) of Ellipse 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 use the borderScaleFactor property which specifies the scale factor of the object's controlling borders.

Syntax

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

Options Keys

borderScaleFactor − This property accepts a Number which specifies the border thickness. The default value is 1.

Example 1

Default behaviour of borderScaleFactor property

Let's take an example to see the default behaviour of the borderScaleFactor property. Although we have specified it in this example, by default, the value that borderScaleFactor uses even when unspecified is 1.

<!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 scale factor (border) of Ellipse using FabricJS?</h2>
      <p>Select the object and observe its controlling borders. Here we have set the <b>borderScaleFacto</b> at 1, which is the default value.</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: "#966fd6",
            borderScaleFactor: 1,
         });

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

Example 2

Passing borderScaleFactor as key

Let's see a code, to increase the border thickness of the ellipse object when it is actively selected. In this example we have assigned the borderScaleFactor a value of 5 which specifies the thickness of our border.

<!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 scale factor (border) of Ellipse using FabricJS?</h2>
      <p>Select the object and observe its controlling borders. Here we have set the <b>borderScaleFactor</b> at 5. </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: "#966fd6",
            borderScaleFactor: 5,
         });

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