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 a Circle using FabricJS?
In this tutorial, we are going to learn how to set the opacity of Circle using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we will create an instance of fabric.Circle class and add it to the canvas. We can customize a circle object by adding a fill colour 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.Circle({ opacity: Number })
Parameters
-
options (optional) ? This parameter is an Object which provides additional customizations to our circle. Using this parameter colour, cursor, border width and a lot of other properties can be changed related to the object of which
opacityis a property.
Options Keys
-
opacity ? This property accepts a Number that allows us to control the opacity of an object. The default value is 1 (fully opaque). Valid range is 0 (transparent) to 1 (opaque).
Example 1: Default Opacity
Let's see a code to see how our circle object looks like with the default value of opacity 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>Default opacity of Circle using FabricJS</h2>
<p>Here we haven't used the <b>opacity</b> property, but by default, it is set to 1. This is the default appearance.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
radius: 50,
fill: "#ff1493"
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Custom Opacity
In this example, we will see how assigning a value to the opacity property changes the opacity of the circle object in our canvas. Here we have used 0.3 as opacity which makes our circle 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>Setting custom opacity of Circle using FabricJS</h2>
<p>Here we have set the <b>opacity</b> at 0.3, which is why the circle appears translucent.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
radius: 50,
fill: "#ff1493",
opacity: 0.3
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Points
- The
opacityproperty accepts values from 0 to 1 - Value 0 makes the object completely transparent
- Value 1 makes the object completely opaque (default)
- Values between 0 and 1 create translucent effects
Conclusion
The opacity property in FabricJS allows you to control the transparency of circle objects. By adjusting opacity values between 0 and 1, you can create various visual effects from fully transparent to completely opaque circles.
412 Views
