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 an object horizontally with respect to current viewport of canvas in IText using FabricJS?
In this tutorial, we are going to learn about how to center an object horizontally with respect to current viewport of canvas 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 center an object horizontally with respect to current viewport of canvas by using the viewportCenterH method.
Syntax
viewportCenterH(): fabric.Object
The viewportCenterH() method centers the IText object horizontally within the current viewport of the canvas and returns the fabric object for method chaining.
Example 1: Default Appearance
Let's see a code example to see how our IText object looks when the viewportCenterH method is not used. In this case, the IText object will not be centered horizontally 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 IText object</h2>
<p>You can see that the itext object has not been centered horizontally with respect to the current viewport of 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 an itext object
var itext = new fabric.IText("Add sample text here.", {
width: 300,
left: 50,
top: 70,
fill: "red",
});
// Add it to the canvas
canvas.add(itext);
</script>
</body>
</html>
In this example, the IText object is positioned at left: 50, which places it towards the left side of the canvas rather than in the center.
Example 2: Using viewportCenterH Method
Let's see a code example to see how the IText object looks like when the viewportCenterH method is used. In this case, our IText object will be centered horizontally with respect to the current viewport of 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>Using the viewportCenterH method</h2>
<p>You can see that the itext object has been centered horizontally with respect to the current viewport of 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 an itext object
var itext = new fabric.IText("Add sample text here.", {
width: 300,
left: 50,
top: 70,
fill: "red",
});
// Add it to the canvas
canvas.add(itext);
// Using the viewportCenterH method
itext.viewportCenterH();
</script>
</body>
</html>
After calling viewportCenterH(), the IText object's position is automatically adjusted so it appears centered horizontally within the canvas viewport, regardless of its initial left value.
Key Points
- The
viewportCenterH()method only affects horizontal positioning - The vertical position (top) remains unchanged
- This method works with the current viewport, making it useful for responsive layouts
- The method returns the fabric object, allowing for method chaining
Conclusion
The viewportCenterH() method provides an easy way to horizontally center IText objects within a FabricJS canvas. This method is particularly useful for creating balanced layouts and ensuring text appears centered regardless of canvas size or initial positioning.
239 Views
