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 a Triangle using FabricJS?
In this tutorial, we are going to learn how to add a shadow to a Triangle using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we will have to create an instance of fabric.Triangle class and add it to the canvas.
Our triangle 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 the triangle by using the shadow property.
Syntax
new fabric.Triangle({ shadow : fabric.Shadow }: Object)
Parameters
-
Options (optional) ? This parameter is an Object which provides additional customizations to our triangle. 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.
Options Keys
-
Shadow ? This property accepts a fabric.Shadow object which allows us to add a shadow to our triangle object.
Shadow Properties
The fabric.Shadow object accepts several properties to customize the shadow appearance:
- color ? Sets the shadow color (hex, RGB, RGBA, or color names)
- blur ? Controls the blur intensity of the shadow
- offsetX ? Horizontal offset of the shadow
- offsetY ? Vertical offset of the shadow
Example 1: Basic Shadow with Color Name
Passing the shadow object to the shadow property
Let's see a code example to understand how we can assign the shadow property a value such that a shadow is added to our triangle object. First, we create 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>Passing the shadow object to the shadow property</h2>
<p>You can see that an orange shadow has been added to the triangle</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a shadow instance
var shadow = new fabric.Shadow({
color: "orange",
blur: 20,
});
// Initiate a triangle object
var triangle = new fabric.Triangle({
left: 120,
top: 70,
width: 90,
height: 80,
fill: "#228b22",
stroke: "#d8e4bc",
strokeWidth: 7,
shadow: shadow,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 2: Shadow with RGBA Value
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. The alpha channel determines the opacity of the color, allowing for semi-transparent shadows.
<!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>Passing an rgba value to the shadow object</h2>
<p>You can see the shadow created using RGBA color value with transparency</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a shadow instance
var shadow = new fabric.Shadow({
color: "rgba(139,0,139,0.8)",
blur: 20,
});
// Initiate a triangle object
var triangle = new fabric.Triangle({
left: 120,
top: 70,
width: 90,
height: 80,
fill: "#228b22",
stroke: "#d8e4bc",
strokeWidth: 7,
shadow: shadow,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 3: Advanced Shadow with Offset
Adding offset properties to position the shadow
You can control the shadow position by using offsetX and offsetY properties to create more realistic 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>Shadow with custom offset positioning</h2>
<p>Notice how the shadow is positioned away from the triangle</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a shadow instance with offset
var shadow = new fabric.Shadow({
color: "#333333",
blur: 15,
offsetX: 10,
offsetY: 10
});
// Initiate a triangle object
var triangle = new fabric.Triangle({
left: 120,
top: 70,
width: 90,
height: 80,
fill: "#ff6b6b",
stroke: "#4ecdc4",
strokeWidth: 5,
shadow: shadow,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Conclusion
Adding shadows to FabricJS triangles enhances their visual appeal and depth. Use fabric.Shadow with properties like color, blur, and offset to create customized shadow effects that suit your design needs.
164 Views
