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 Rectangle using FabricJS?
In this tutorial, we are going to learn how to add a shadow to a Rectangle using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we will have to create an instance of fabric.Rect class and add it to the canvas.
Our rectangle 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 rectangle by using the shadow property.
Syntax
new fabric.Rect({ shadow: fabric.Shadow })
Parameters
-
Options (optional) ? This parameter is an Object which provides additional customizations to our rectangle. 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 Properties
The fabric.Shadow constructor accepts the following properties:
color ? The color of the shadow (hex, rgba, or color name)
blur ? The blur amount for the shadow effect
offsetX ? Horizontal offset of the shadow
offsetY ? Vertical offset of the shadow
Example 1: Basic Shadow
Adding a colored shadow to the rectangle
Let's see how to create a shadow using fabric.Shadow and apply it to our rectangle object.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Basic Shadow Example</h2>
<p>Rectangle with an orange shadow</p>
<canvas id="canvas" width="400" height="300"></canvas>
<script>
// Create canvas instance
var canvas = new fabric.Canvas("canvas");
// Create shadow instance
var shadow = new fabric.Shadow({
color: "orange",
blur: 20,
offsetX: 10,
offsetY: 10
});
// Create rectangle with shadow
var rect = new fabric.Rect({
left: 100,
top: 70,
width: 170,
height: 70,
fill: "#00b7eb",
stroke: "#ffa089",
strokeWidth: 3,
shadow: shadow
});
// Add to canvas
canvas.add(rect);
</script>
</body>
</html>
Example 2: RGBA Shadow
Using RGBA values for shadow transparency
We can create more subtle shadows using RGBA values. The alpha channel controls the shadow's transparency.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>RGBA Shadow Example</h2>
<p>Rectangle with semi-transparent red shadow</p>
<canvas id="canvas" width="400" height="300"></canvas>
<script>
// Create canvas instance
var canvas = new fabric.Canvas("canvas");
// Create shadow with RGBA color
var shadow = new fabric.Shadow({
color: "rgba(255, 69, 0, 0.7)",
blur: 25,
offsetX: 15,
offsetY: 15
});
// Create rectangle with RGBA shadow
var rect = new fabric.Rect({
left: 100,
top: 70,
width: 170,
height: 70,
fill: "#00b7eb",
stroke: "#ffa089",
strokeWidth: 3,
shadow: shadow
});
// Add to canvas
canvas.add(rect);
</script>
</body>
</html>
Shadow Customization Options
| Property | Type | Description |
|---|---|---|
color |
String | Shadow color (hex, rgba, color name) |
blur |
Number | Blur intensity (higher = more blurred) |
offsetX |
Number | Horizontal shadow displacement |
offsetY |
Number | Vertical shadow displacement |
Conclusion
Adding shadows to FabricJS rectangles enhances visual appeal and depth. Use fabric.Shadow with color, blur, and offset properties to create the desired shadow effect.
427 Views
