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 Triangle using FabricJS?
In this tutorial, we are going to learn how to set the opacity of 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. We can customize a triangle 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.Triangle({ opacity: Number }: Object)
Parameters
-
Options (optional) ? This parameter is an Object which provides additional customizations to our Triangle. Using this parameter colour, 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 as value which allows us to control the opacity of an object. The default value of opacity property is 1.
Example 1: Default Appearance of a Triangle
Let's see a code example to see how our Triangle object looks like with the default value of opacity property. We will not pass any opacity key to the class, as shown in the example below:
<!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 appearance of a Triangle object</h2>
<p>Notice that the triangle is fully opaque.</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 triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 70,
width: 90,
height: 80,
fill: "#746cc0",
stroke: "#967bb6",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(triangle);
</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 triangle object in our canvas. Here we have used 0.3 as opacity which makes our triangle 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>Passing the opacity property as key</h2>
<p>You can see our triangle is not fully opaque</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 triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 70,
width: 90,
height: 80,
fill: "#746cc0",
stroke: "#967bb6",
strokeWidth: 5,
opacity: 0.3,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Key Points
- The opacity property accepts values between 0 and 1
- Value 0 makes the object completely transparent
- Value 1 makes the object fully opaque (default)
- Values between 0 and 1 create varying levels of transparency
Conclusion
The opacity property in FabricJS provides an easy way to control the transparency of Triangle objects. By adjusting opacity values between 0 and 1, you can create various visual effects from fully transparent to completely opaque triangles.
219 Views
