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 current character font size in IText using FabricJS?
In this tutorial, we are going to learn about how to get the current character font size in IText using FabricJS. The IText class was introduced in FabricJS version 1.4, extends fabric.Text and is used to create IText instances. An IText instance gives us the freedom to select, cut, paste or add new text without additional configurations. There are also various supported key combinations and mouse/touch combinations which make text interactive which are not provided in Text.
Textbox, however, which is based on IText allows us to resize the text rectangle and wraps lines automatically. This is not true for IText as height is not adjusted based on the wrapping of lines. We can manipulate our IText object by using various properties. Likewise, we can get the current character font size by using the getCurrentCharFontSize method.
Syntax
getCurrentCharFontSize(): Number
Parameters
This method takes no parameters and returns a number representing the current character font size at the cursor position or selection.
Return Value
Returns a Number representing the font size in pixels of the current character or selection.
Example 1: Using the getCurrentCharFontSize method
Let's see a code example to see how the IText object looks like when the getCurrentCharFontSize method is used. Since we have not specified a font size, the default fontSize value for itext object will be returned, which is 40.
<!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 getCurrentCharFontSize method</h2>
<p>You can open console from dev tools and see the logged output</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 an itext object
var itext = new fabric.IText(
"Add sample text here.\nLorem ipsum dolor sit amet",{
width: 300,
left: 50,
top: 70,
fill: "blue",
}
);
// Add it to the canvas
canvas.add(itext);
// Using getCurrentCharFontSize method
console.log(
"The current character font size is: ",
itext.getCurrentCharFontSize()
);
</script>
</body>
</html>
The current character font size is: 40
Example 2: Using the getCurrentCharFontSize method with fontSize property
Let's see a code example to see the logged output when the getCurrentCharFontSize method is used along with the fontSize property. The fontSize property allows us to specify a font size for our itext object. In this case, since we have passed the fontSize property a value of 25, our logged output will be the same.
<!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 getCurrentCharFontSize method along with fontSize property</h2>
<p>You can open console from dev tools and see the logged output</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 an itext object
var itext = new fabric.IText(
"Add sample text here.\nLorem ipsum dolor sit amet",{
width: 300,
left: 50,
top: 70,
fill: "blue",
fontSize: 25,
}
);
// Add it to the canvas
canvas.add(itext);
// Using getCurrentCharFontSize method
console.log(
"The current character font size is: ",
itext.getCurrentCharFontSize()
);
</script>
</body>
</html>
The current character font size is: 25
Key Points
- The
getCurrentCharFontSize()method returns the font size at the current cursor position - When no specific fontSize is set, it returns the default value of 40 pixels
- The method is particularly useful when dealing with mixed font sizes within the same IText object
- It returns the font size as a number representing pixels
Conclusion
The getCurrentCharFontSize() method provides an easy way to retrieve the current character font size in FabricJS IText objects. This method is essential for text editing applications where you need to know the formatting at the cursor position.
562 Views
