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 Image object horizontally on current viewport of canvas using FabricJS?
In this tutorial, we are going to learn how to center an Image object horizontally on current viewport of canvas using FabricJS. We can create an Image object by creating an instance of fabric.Image. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc. In order to center an Image object horizontally on current viewport of canvas, we use the viewportCenterH method.
Syntax
viewportCenterH(): fabric.Object
Default appearance of the Image object
Let's see a code example to see how our Image object looks when the viewportCenterH method is not used. In this case, the image 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 Image object</h2>
<p>You can see the default appearance of Image object</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
});
// Add it to the canvas
canvas.add(image);
</script>
</body>
</html>
Using the viewportCenterH method
Let's see a code example to see how the image object looks like when the viewportCenterH method is used. In this case, our image 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 image object is centered horizontally with respect to the current viewport of canvas
</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
});
// Add it to the canvas
canvas.add(image);
// Using the viewportCenterH method
image.viewportCenterH();
</script>
</body>
</html>
Key Points
The viewportCenterH method provides several advantages:
- Centers the image horizontally relative to the canvas viewport, not the canvas dimensions
- Works regardless of canvas zoom level or pan position
- Returns the fabric object, allowing for method chaining
- Only affects horizontal positioning - vertical position remains unchanged
Conclusion
The viewportCenterH method is a convenient way to center Image objects horizontally in FabricJS. It ensures proper alignment relative to the current viewport, making it ideal for creating balanced canvas layouts.
494 Views
