Home > Article > Web Front-end > FabricJS - How to center Line object horizontally on canvas?
In this tutorial, we will learn how to center a Line object horizontally on the canvas using FabricJS. Line element is one of the basic elements provided in FabricJS. It is used to create straight lines. Since line elements are geometrically one-dimensional and contain no interiors, they are never filled. We can create a line object by creating a fabric.Line instance, specifying the x and y coordinates of the line and adding it to the canvas. To center the line object horizontally on the canvas, we use the centerH method.
centerH()
Let’s look at a code example without using centerH method is the appearance of our line object. In this case, the line 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 Line object</h2> <p>You can see that the line object has not been centered horizontally 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 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>
In this example we will see how by using the centerH method we are able to place a line object exactly in the horizontal center of the canvas. In this case, the object is centered 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 centerH method</h2> <p> You can see that the line object has been centered horizontally 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 Line object var line = new fabric.Line([200, 100, 100, 40], { stroke: "blue", strokeWidth: 20, }); // Add it to the canvas canvas.add(line); // Using the centerH() method to center line object horizontally line.centerH(); </script> </body> </html>
The above is the detailed content of FabricJS - How to center Line object horizontally on canvas?. For more information, please follow other related articles on the PHP Chinese website!