How to create a canvas with an ellipse using FabricJS?

FabricJSJavascriptHTML5 Canvas

In this tutorial, we are going to learn how to create a canvas with an Ellipse object 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.

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 ellipse object of which rx and ry are properties.

Options Keys

  • rx − This property accepts a Number which determines the horizontal radius of the ellipse. If we don't specify a horizontal radius, our ellipse would not be displayed on our canvas.

  • ry − This property accepts a Number which determines the vertical radius of the ellipse. If we don't specify a vertical radius, our ellipse would not be displayed on our canvas.

Example 1

Creating an instance of fabric.Ellipse() and adding it to our canvas

Let's see an example of how we can add an ellipse to our canvas. Here we have created an object with a horizontal radius of 80px and vertical radius of 50 px. We have used sky blue color to fill in our object whose hexadecimal value is #87ceeb.

<!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 create a canvas with an ellipse using FabricJS?</h2>
      <p>Here we have created an ellipse object and set it over a canvas.</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: 100,
            fill: "#87ceeb",
            rx: 80,
            ry: 50,
         });
         
         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Example 2

Manipulating the Ellipse object by using the set method

In this example, we have assigned the properties to the ellipse by using the set method which is a setter for values. Any property related to stroke, strokeWidth, radius, scaling, rotation, etc., can be mutated by using this method.

<!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 create a canvas with an ellipse using FabricJS?</h2>
      <p>Here we have used the <b>set</b> method to create an ellipse object over the canvas. </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();
         
         // Using set to set the properties
         ellipse.set("rx", 90);
         ellipse.set("ry", 40);
         ellipse.set("fill", "#1e90ff");
         ellipse.set({
            stroke: "rgba(245,199,246,0.5)",
            strokeWidth: 6
         });
         ellipse.set("left", 150);
         ellipse.set("top", 90);
         
         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>
raja
Updated on 24-May-2022 08:45:22

Advertisements