- 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 scaled height of Text using FabricJS?
In this tutorial, we are going to learn how to get the scaled height of Text using FabricJS. We can display text on canvas by adding an instance of fabric.Text. Not only does it allow us to move, scale and change the dimensions of the text but it also provides additional functionality like text alignment, text decoration, line height which can be obtained by the properties textAlign, underline and lineHeight respectively. We can also find the object’s scaled height by using the getScaledHeight method.
Syntax
getScaledHeight()
Example 1
Using the getScaledHeight method
Let’s see a code example to see the logged output when the getScaledHeight method is used. In this case, the height of the object will be returned.
<!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 getScaledHeight method</h2> <p>You can open console from dev tools and see that the height value is being displayed in the console</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 text object var text = new fabric.Text("Add sample
text here", { width: 300, fill: "green", fontWeight: "bold", }); // Add it to the canvas canvas.add(text); // Using getScaledHeight method console.log("The scaled height is", text.getScaledHeight()); </script> </body> </html>
Example 2
Using the getScaledHeight method and passing the scaleY property
Let’s see a code example to see the logged output when the getScaledHeight method is used in conjunction with the scaleY property. In this case, final scaled height will be displayed in the console.
<!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 getScaledHeight method and passing the scaleY property</h2> <p>You can open console from dev tools and see that the height value is being displayed in the console has increased </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 text object var text = new fabric.Text("Add sample
text here", { width: 300, fill: "green", fontWeight: "bold", scaleY: 2, }); // Add it to the canvas canvas.add(text); // Using getScaledHeight method console.log("The scaled height is", text.getScaledHeight()); </script> </body> </html>