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 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\ntext 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>
The scaled height is 47.2
Example 2: Using the getScaledHeight method with 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\ntext 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>
The scaled height is 94.4
How It Works
The getScaledHeight() method calculates the actual height of the text object after applying any scaling transformations. When you set scaleY: 2, the text becomes twice as tall, and getScaledHeight() returns the final calculated height (original height × scaleY factor).
Key Points
- The method returns the height including any vertical scaling applied to the text object
- Without any scaling, it returns the natural height of the text
- With
scaleYapplied, it returns the height multiplied by the scale factor - This is useful for layout calculations and positioning other objects relative to scaled text
Conclusion
The getScaledHeight() method in FabricJS provides an easy way to retrieve the actual rendered height of text objects, accounting for any scaling transformations. This is essential for precise layout management in canvas applications.
369 Views
