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 on current viewport of canvas using FabricJS?
In this tutorial, we are going to learn how to center an Image object 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 on the current viewport of canvas, we use the viewportCenter method.
Syntax
viewportCenter(): fabric.Object
This method centers the object within the current viewport of the canvas both horizontally and vertically. It returns the fabric object for method chaining.
Default Appearance of the Image Object
Let's see a code example to see how our Image object looks when the viewportCenter method is not used. In this case, the image 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 Image object</h2>
<p>
You can see that the image object is not centered 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);
</script>
</body>
</html>
Using the viewportCenter Method
Let's see a code example to see how the image object looks when the viewportCenter method is used. In this case, our image object will be centered with respect to the current viewport of the canvas both vertically and horizontally.
<!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 viewportCenter method</h2>
<p>
You can see that the image object is centered 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 viewportCenter method
image.viewportCenter();
</script>
</body>
</html>
Key Points
- The
viewportCentermethod centers objects within the visible canvas area - It works regardless of the initial
topandleftposition values - The method can be chained with other fabric.js methods
- It's particularly useful when you want to ensure objects are visible and centered after canvas resizing
Conclusion
The viewportCenter method provides an easy way to center Image objects on a FabricJS canvas. This method ensures your images are always positioned at the center of the current viewport, making them prominently visible to users.
1K+ Views
