How to add shadow to an Ellipse using FabricJS?

In this tutorial, we are going to learn how to add a shadow to an Ellipse 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. Our ellipse object can be customized in various ways like changing its dimensions, adding a background color or even adding a shadow to it. We can add a shadow to an Ellipse by using the shadow property.

Syntax

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

Options Keys

shadow − This property accepts a fabric.Shadow object which allows us to add a shadow to our Ellipse object. For example, in order to add a shadow to our Ellipse object we need to create a new instance of fabric.Shadow and then assign that instance to shadow property.

Example 1

Passing the shadow object to the shadow property

Let's see a code to understand how we can assign the shadow property with a value such that a shadow is added to our Ellipse object. Firstly, we need to make a new instance of fabric.Shadow and then assign that instance to our shadow property.

<!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>Adding shadow effect to an ellipse using FabricJS</h2>
      <canvas id="canvas"></canvas>
     
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         
         // Initiate a shadow instance
         var shadow = new fabric.Shadow({
            color: "yellow",
            blur: 20,
         });
         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ff1493",
            shadow: shadow,
         });
         
         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Example 2

Passing an "rgba" value to the shadow object

We can also adjust the shadow and give it a blurred-out appearance, by assigning it an "rgba" value which stands for red, blue, green and alpha. Alpha determines the opacity of the color.

<!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>Adding shadow effect to an eclipse using FabricJS</h2>
      <p>Here we are passing an "rgba" value for the shadow effect.</p>
      <canvas id="canvas"></canvas>
     
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         
         // Initiate a shadow instance
         var shadow = new fabric.Shadow({
            color: "rgba(65,105,225,0.8)",
            blur: 20,
         });
         
         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ff1493",
            shadow: shadow,
         });
         
         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>