Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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>
117 Views
