How to set the opacity of an Ellipse using FabricJS?

In this tutorial, we are going to learn how to set the opacity of 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 adding a fill color to it, eliminate its borders or even make changes in its dimensions. Similarly, we can also change its opacity by using the opacity property.

Syntax

new fabric.Ellipse({ opacity: Number }: Object)

Parameters

options (optional) − This parameter is an Object which provides additional customizations to our ellipse. Using this parameter color, cursor, border width and a lot of other properties can be changed related to the object of which opacity is a property.

Options Keys

opacity − This property accepts a Number that allows us to control the opacity of an object. The default value of opacity property is 1.

Example 1

Default appearance of an ellipse object

Let's see a code to see how our ellipse object looks like with the default value of opacity property. We will not pass any opacity key to the class in this example as given below −

<!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 opacity of Ellipse using FabricJS?</h2>
      <p>Observe that here we have not used the <b>opacity</b> property, so by default, it takes the value 1. </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: 80,
            ry: 50,
            fill: "#ff1493",
         });

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

Example 2

Passing the opacity property as key

In this example, we will see how assigning a value to the opacity property changes the opacity of the ellipse object in our canvas. Here we have used 0.3 as opacity which thus makes our ellipse object look translucent instead of fully opaque.

<!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 opacity of Ellipse using FabricJS?</h2>
      <p>Here we have set the <b>opacity</b> at 0.3, which is why the ellipse is less opaque.</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: 80,
            ry: 50,
            fill: "#ff1493",
            opacity: 0.3,
         });

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