How to set the position of an Ellipse from left using FabricJS?

In this tutorial, we are going to learn how to set the position of an Ellipse from the left 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. We can manipulate an ellipse object by changing its position, opacity, stroke and also its dimension. The position from left can be changed by using the left property.

Syntax

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

Options Keys

left − This property accepts a Number which sets the left position of an object. The value determines how far from left the object will be placed.

Example 1

Default placement of the ellipse object

Let's see an example to understand the default placement of an ellipse object in the canvas when its position has not been changed.

<!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 position of an Ellipse from left using FabricJS</h2>
      <p>This is the default position, as we have not used the <b>left</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({
            fill: "white",
            rx: 80,
            ry: 50,
            stroke: "black",
            strokeWidth: 5,
         });

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

Example 2

Passing left property as key

In this example, we are assigning the left property with a custom value. Since it accepts a Number, you must assign it a numerical value which will represent its position from the left.

<!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 position of Ellipse from left using FabricJS?</h2>
      <p>Notice that the circle is placed 135px away from the left, since we have used the <b>left</b> property with a custom 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: 135,
            fill: "white",
            rx: 80,
            ry: 50,
            stroke: "black",
            strokeWidth: 5,
         });

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