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 center a Text object horizontally and vertically on canvas using FabricJS?
In this tutorial, we are going to learn how to center a Text horizontally and vertically on canvas 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 center the text object horizontally and vertically on the canvas by using the center method.
Syntax
text.center()
Parameters
The center() method takes no parameters. It automatically positions the text object at the center of the canvas both horizontally and vertically.
Example 1: Default Appearance of the Text Object
Let's see a code example to see how our text object looks when the center method is not used. In this case, the text object will not be centered on the canvas.
<!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 the Text object</h2>
<p>You can see that the text object has not been centered on the canvas</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",
textAlign: "center",
});
// Add it to the canvas
canvas.add(text);
</script>
</body>
</html>
Example 2: Using the center() Method
In this example, we will see how by using the center method, we are able to place the text object exactly at the center of the canvas. In this case, the object is centered horizontally and vertically.
<!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 center method</h2>
<p>You can see that the text object has been centered on the canvas</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",
textAlign: "center",
});
// Add it to the canvas
canvas.add(text);
// Using center() to center the text object on the canvas
text.center();
</script>
</body>
</html>
Key Points
- The
center()method positions the text object at the exact center of the canvas - It works for both horizontal and vertical centering simultaneously
- The method should be called after adding the text object to the canvas
- The
textAlign: "center"property centers the text within its bounding box, whilecenter()centers the entire object on the canvas
Conclusion
The center() method in FabricJS provides a simple way to position text objects at the center of the canvas. This is particularly useful for creating balanced layouts and ensuring text appears exactly where intended on the canvas.
487 Views
