- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to get the opacity of Image object using FabricJS?
In this tutorial, we are going to learn how to get the opacity of Image using FabricJS. We can create an Image object by creating an instance of fabric.Image. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc. In order to get the opacity of Image, we use the getObjectOpacity method.
Syntax
getObjectOpacity(): Number
Using the getObjectOpacity method
Example
Let’s see a code example to see the logged output when the getObjectOpacity method is used. In this case, the default opacity will be displayed in the console which is 1.
<!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>Using the getObjectOpacity method</h2> <p> You can open console from dev tools and see that the logged value is being displayed in the console </p> <canvas id="canvas"></canvas> <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" /> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiating the image element var imageElement = document.getElementById("img1"); // Initiate an Image object var image = new fabric.Image(imageElement, { top: 50, left: 110, }); // Add it to the canvas canvas.add(image); // Using getObjectOpacity method console.log("The opacity is: ", image.getObjectOpacity()); </script> </body> </html>
Using the getObjectOpacity method and passing the opacity property
Example
Let’s see a code example to see the logged output when the getObjectOpacity method is used in conjunction with the opacity property. In this case, the opacity of the image object has been assigned a value of 0.7 and hence the logged output will be 0.7.
<!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>Using the getObjectOpacity method and passing the opacity property</h2> <p> You can open console from dev tools and see that the opacity value is being displayed in the console </p> <canvas id="canvas"></canvas> <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" /> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiating the image element var imageElement = document.getElementById("img1"); // Initiate an Image object var image = new fabric.Image(imageElement, { top: 50, left: 110, opacity: 0.7, }); // Add it to the canvas canvas.add(image); // Using getObjectOpacity method console.log("The opacity is: ", image.getObjectOpacity()); </script> </body> </html>