Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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: Basic Shadow Effect
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. 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 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: Using RGBA Colors for Shadow
We can also adjust the shadow and give it a blurred-out appearance, by assigning it an "rgba" value which stands for red, green, blue and alpha. Alpha determines the opacity of the color, allowing for more subtle shadow effects.
<!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>
<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 with RGBA color
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>
Shadow Properties
The fabric.Shadow object accepts several properties to customize the shadow appearance:
- color ? Sets the shadow color (hex, rgba, or named colors)
- blur ? Controls the blur radius of the shadow
- offsetX ? Horizontal offset of the shadow
- offsetY ? Vertical offset of the shadow
Conclusion
Adding shadows to FabricJS ellipses enhances visual depth and creates professional-looking graphics. Use the fabric.Shadow object with properties like color, blur, and offset to achieve the desired shadow effect for your ellipse objects.
275 Views
