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 top using FabricJS?
In this tutorial, we will learn how to set the position of a triangle from the top using FabricJS. The top property allows us to manipulate the vertical position of the triangle object on the canvas. By default, when no top value is specified, the triangle is positioned at the top edge of the canvas.
Syntax
new fabric.Triangle({ top: Number })
Parameters
-
Options (optional) ? This parameter is an Object that provides additional customizations to our triangle. Using this parameter, properties such as color, cursor, stroke width, and many other properties can be changed, including the top property.
Option Keys
-
top ? This property accepts a Number value that sets the distance (in pixels) from the top edge of the canvas to position the triangle vertically.
Example 1: Default Triangle Position
Let's see how the triangle appears when the top property is not specified. The triangle will be positioned at the default location.
<!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 Triangle Position</h2>
<p>Triangle without the <b>top</b> property specified</p>
<canvas id="canvas"></canvas>
<script>
// Create a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(400);
canvas.setHeight(250);
// Create a triangle object
var triangle = new fabric.Triangle({
left: 105,
width: 90,
height: 80,
fill: "#ffc1cc",
stroke: "#fbaed2",
strokeWidth: 5,
});
// Add triangle to canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 2: Setting Custom Top Position
In this example, we use the top property with a value of 70. This positions the triangle 70 pixels from the top 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>Triangle with Custom Top Position</h2>
<p>Triangle positioned 70px from the top of the canvas</p>
<canvas id="canvas"></canvas>
<script>
// Create a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(400);
canvas.setHeight(250);
// Create a triangle with custom top position
var triangle = new fabric.Triangle({
left: 105,
top: 70,
width: 90,
height: 80,
fill: "#ffc1cc",
stroke: "#fbaed2",
strokeWidth: 5,
});
// Add triangle to canvas
canvas.add(triangle);
</script>
</body>
</html>
Key Points
- The
topproperty accepts numeric values representing pixels - Higher values move the triangle further down from the top edge
- The property works in combination with other positioning properties like
left - When
topis not specified, the triangle uses the default position
Conclusion
The top property in FabricJS provides precise control over the vertical positioning of triangle objects on the canvas. By adjusting this value, you can place triangles at any desired distance from the top edge of your canvas.
209 Views
