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
FabricJS – How to center a Line object horizontally and vertically on a canvas?
In this tutorial, we are going to learn how to center a Line object horizontally and vertically on canvas using FabricJS. A Line element is one of the basic elements provided in FabricJS. It is used for creating straight lines. Because line elements are geometrically one-dimensional and do not contain an interior, they are never filled. We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas. In order to center the line object horizontally and vertically on the canvas we use the center() method.
Syntax
center()
This method centers the object both horizontally and vertically on the canvas without requiring any parameters.
Default appearance of the Line object
Let's see a code example to see how our line object looks when the center() method is not used. In this case, the line 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 Line object</h2>
<p>You can see that the line object is not centered</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(400);
canvas.setHeight(250);
// Initiate a Line object
var line = new fabric.Line([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 20,
});
// Add it to the canvas
canvas.add(line);
</script>
</body>
</html>
Using the center() method
In this example, we will see how by using the center() method, we are able to place the line object exactly at the center of the canvas. The object is centered both 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 line 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(400);
canvas.setHeight(250);
// Initiate a Line object
var line = new fabric.Line([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 20,
});
// Add it to the canvas
canvas.add(line);
// Using center() to center the line object on the canvas
line.center();
</script>
</body>
</html>
How It Works
The center() method calculates the canvas dimensions and positions the object at the exact center point. It automatically adjusts the object's left and top properties to center the object both horizontally and vertically on the canvas.
Conclusion
The center() method in FabricJS provides a simple way to position Line objects at the exact center of the canvas. This method works for all FabricJS objects and automatically handles the positioning calculations.
382 Views
