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 set the position of a Triangle from left using FabricJS?
In this tutorial, we are going to learn how to set the position of a Triangle from the left using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we will have to create an instance of fabric.Triangle class and add it to the canvas.
We can manipulate a triangle object by changing its position, opacity, stroke and also its dimension. The position from left can be changed by using the left property.
Syntax
new fabric.Triangle({ left: Number }: Object)
Parameters
-
Options (optional) ? This parameter is an Object which provides additional customizations to our triangle. Using this parameter, properties such as colour, cursor, stroke width, and a lot of other properties can be changed related to the object of which left is a property.
Options Keys
-
left ? This property accepts a Number value which sets the left position of an object. The value determines how far from left edge of canvas, the object will be placed.
Example 1: Default Placement of Triangle
Let's see a code example to understand the default placement of a triangle object in the canvas when its position has not been changed.
<!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 placement of the triangle object</h2>
<p>You can see the default placement of the triangle</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 triangle object
var triangle = new fabric.Triangle({
top: 50,
fill: "#b0e0e6",
height: 90,
width: 100,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 2: Using Left Property
In this example, we are assigning the left property with a custom value. Since it accepts a Number, you must assign it a numerical value which will represent its position from the left edge 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>Passing left property as key</h2>
<p>You can see that the triangle is placed at a distance of 80px from the left.</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 triangle object
var triangle = new fabric.Triangle({
left: 80,
top: 50,
fill: "#b0e0e6",
height: 90,
width: 100,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Key Points
- The left property accepts numerical values in pixels
- Default left position is 0 if not specified
- Negative values will move the triangle outside the visible canvas area
- The left property works in combination with other positioning properties like top
Conclusion
The left property in FabricJS allows precise horizontal positioning of triangle objects on the canvas. By setting different numerical values, you can control exactly where your triangle appears from the left edge of the canvas.
257 Views
