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 set the opacity of an Ellipse using FabricJS?
In this tutorial, we are going to learn how to set the opacity of Ellipse using FabricJS. Ellipse is one of the various shapes provided by FabricJS. In order to create an ellipse, we will have to create an instance of fabric.Ellipse class and add it to the canvas. We can customize an ellipse object by adding a fill color to it, eliminate its borders or even make changes in its dimensions. Similarly, we can also change its opacity by using the opacity property.
Syntax
new fabric.Ellipse({ opacity: Number }: Object)
Parameters
-
options (optional) ? This parameter is an Object which provides additional customizations to our ellipse. Using this parameter color, cursor, border width and a lot of other properties can be changed related to the object of which opacity is a property.
Options Keys
-
opacity ? This property accepts a Number that allows us to control the opacity of an object. The default value of opacity property is 1 (fully opaque). Values range from 0 (fully transparent) to 1 (fully opaque).
Example 1: Default Opacity (Fully Opaque)
Let's see a code to see how our ellipse object looks like with the default value of opacity property. We will not pass any opacity key to the class in this example:
<!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>How to set the opacity of Ellipse using FabricJS?</h2>
<p>Observe that here we have not used the <b>opacity</b> property, so by default, it takes the value 1. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 115,
top: 50,
rx: 80,
ry: 50,
fill: "#ff1493",
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Setting Custom Opacity
In this example, we will see how assigning a value to the opacity property changes the opacity of the ellipse object in our canvas. Here we have used 0.3 as opacity which thus makes our ellipse object look translucent instead of fully opaque:
<!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>How to set the opacity of Ellipse using FabricJS?</h2>
<p>Here we have set the <b>opacity</b> at 0.3, which is why the ellipse is less opaque.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 115,
top: 50,
rx: 80,
ry: 50,
fill: "#ff1493",
opacity: 0.3,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Points
The
opacityproperty accepts values from 0 to 1Default opacity is 1 (fully opaque)
Lower values make the ellipse more transparent
This property is useful for creating layered effects and overlapping shapes
Conclusion
The opacity property in FabricJS allows you to control the transparency of ellipse objects. By adjusting values between 0 and 1, you can create various visual effects and improve the layering of shapes in your canvas applications.
282 Views
