How to set the horizontal and vertical radius of an Ellipse using FabricJS?

In this tutorial, we are going to learn how to set the horizontal and vertical radius of an Ellipse using FabricJS. Ellipse is one of the various shapes provided by FabricJS. In order to create an ellipse, we will have to create an instance of fabric.Ellipse class and add it to the canvas. We can customize an ellipse object by specifying its position, color, opacity and dimension. However, the most important properties are rx and ry which allow us to assign the horizontal and vertical radius of Ellipse.

Syntax

new fabric.Ellipse({ rx : Number, ry: 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 rx and ry are properties.

Options Keys

rx − This property accepts a Number value. The value that is assigned, determines the horizontal radius of the ellipse object.
ry − This property accepts a Number value. The value that is assigned, determines the vertical radius of the ellipse object.

Example 1

Default appearance when rx and ry is not used

The following code shows how the ellipse object would appear when the rx and ry properties are not used. In this example, we can see that we have used a fill color to spot our ellipse, it is invisible since we have not assigned it a horizontal and vertical radius.

<!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 the horizontal and vertical radius of an Ellipse using FabricJS</h2>
      <p>Here we are getting a blank output because we have not assigned any horizontal and vertical radius.</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,
            fill: "red",
         });

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

Example 2

Passing rx and ry properties as key

In this example, we are passing rx and ry properties the values 100 and 70, respectively. Due to this our ellipse object will have a horizontal radius of 100px and vertical radius of 70px.

<!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 horizontal and vertical radius of Ellipse using FabricJS?</h2>
      <p>Here we have supplied the horizontal and vertical radius, <b>rx</b> and <b>ry</b>. Hence we are getting an ellipse of a definite dimension. </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: 100,
            ry: 70,
            fill: "red",
         });

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