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 height of a Triangle using FabricJS?
In this tutorial, we are going to learn how to set the height of a Triangle 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. FabricJS allows us to control an object's dimensions by using the width and height properties.
Syntax
new fabric.Triangle({ height: 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 height is a property.
Options Keys
-
height ? This property accepts a Number value which allows us to specify the object's height. Its default value is 100.
Example 1: Default Height Behavior
Let's see a code example to understand the default behavior of the height property. When no height is specified, FabricJS uses the default value of 100 pixels.
<!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 behaviour of height property</h2>
<p>Notice that the default triangle's height is 100.</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: 105,
top: 70,
width: 90,
fill: "#746cc0",
stroke: "#967bb6",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 2: Setting Custom Height
Now that we have assigned the height property a value of 140px, we can see the changes in its height. The triangle becomes taller while maintaining its proportions.
<!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 height property as key</h2>
<p>You can see that the triangle's height now has a fixed value of 140.</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: 105,
top: 70,
width: 90,
height: 140,
fill: "#746cc0",
stroke: "#967bb6",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Key Points
- The height property controls the vertical dimension of the triangle
- Default height value is 100 pixels if not specified
- Height can be set during object creation or modified later
- The triangle maintains its triangular shape regardless of height changes
Conclusion
Setting the height of a Triangle in FabricJS is straightforward using the height property. This allows you to create triangles of various sizes to fit your canvas design requirements.
194 Views
