Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to add shadow to a Circle using FabricJS?

FabricJS Javascript HTML5 Canvas

In this tutorial, we are going to learn how to add a shadow to a Circle using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we will create an instance of fabric.Circle class and add it to the canvas. Our circle 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 a Circle by using the shadow property.

Syntax

new fabric.Circle({ shadow : fabric.Shadow }: Object)

Parameters

  • options (optional) ? This parameter is an Object which provides additional customizations to our circle. Using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be changed related to the object of which shadow is a property.

Shadow Property Options

  • shadow ? This property accepts a fabric.Shadow object which allows us to add a shadow to our circle object. To add a shadow, we need to create a new instance of fabric.Shadow and then assign that instance to the shadow property.

fabric.Shadow Properties

  • color ? Specifies the shadow color (hex, rgb, rgba, or named color)
  • blur ? Controls the blur amount of the shadow
  • offsetX ? Horizontal offset of the shadow
  • offsetY ? Vertical offset of the shadow

Example 1: Basic Shadow

Passing the shadow object to the shadow property

Let's see an example to understand how we can assign the shadow property value, by which a shadow will be added to our Circle object. First, 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 to a circle using FabricJS</h2>
      <p>Notice the shadow around the circle object. Here we have applied the <b>shadow</b> property. </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: "black",
            blur: 20
         });
         
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 50,
            fill: "#85bb65",
            shadow: shadow
         });
         
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Example 2: RGBA Shadow Color

Passing an 'rgba' value to the shadow object

We can also adjust the shadow and give it a blurred appearance by assigning it an 'rgba' value which stands for red, green, blue 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 to a circle using FabricJS</h2>
      <p>Notice the shadow around the circle object. Here we have passed an 'rgba' value to assign the color.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
        
         // Initiate a shadow instance with RGBA color
         var shadow = new fabric.Shadow({
            color: "rgba(0,128,0,0.8)",
            blur: 20
         });
         
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 50,
            fill: "#85bb65",
            shadow: shadow
         });
         
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Example 3: Shadow with Offset

Adding offset to create directional shadow

We can create more realistic shadows by adding horizontal and vertical offsets using offsetX and offsetY properties.

<!DOCTYPE html>
<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
   </head>
   
   <body>
      <h2>Circle with offset shadow using FabricJS</h2>
      <canvas id="canvas"></canvas>

      <script>
         var canvas = new fabric.Canvas("canvas");
        
         var shadow = new fabric.Shadow({
            color: "rgba(0,0,0,0.6)",
            blur: 15,
            offsetX: 10,
            offsetY: 10
         });
         
         var circle = new fabric.Circle({
            left: 100,
            top: 50,
            radius: 40,
            fill: "#ff6b6b",
            shadow: shadow
         });
         
         canvas.add(circle);
         canvas.setWidth(300);
         canvas.setHeight(200);
      </script>
   </body>
</html>

Key Shadow Properties

Property Type Description
color String Shadow color (hex, rgb, rgba, named)
blur Number Blur amount (higher = more blur)
offsetX Number Horizontal shadow offset
offsetY Number Vertical shadow offset

Conclusion

Adding shadows to FabricJS circles is straightforward using the fabric.Shadow class. You can customize shadow appearance with color, blur, and offset properties to create various visual effects for your canvas objects.

Updated on: 2026-03-15T23:19:00+05:30

360 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements