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 width of a Triangle using FabricJS?
In this tutorial, we are going to learn how to set the width 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({ width: 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 width is a property.
Options Keys
-
width ? This property accepts a Number value which allows us to specify the object's width. Its default value is 100.
Example 1: Default Width Property
Let's see a code example to understand the default behaviour of the width property. When no width is specified, the triangle 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 width property</h2>
<p>You can see that the default value of triangle's width 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: 60,
top: 50,
fill: "#b0e0e6",
height: 90,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 2: Custom Width Property
Now that we have assigned the width property a value of 180px, we can see the changes in its width. The triangle becomes wider compared to the default width.
<!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 width property as key</h2>
<p>You can see that the triangle's width now has a fixed value of 180.</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: 60,
top: 50,
fill: "#b0e0e6",
height: 90,
width: 180,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Key Points
- The
widthproperty controls the horizontal dimension of the triangle - Default width value is 100 pixels if not specified
- Width can be set during triangle creation or modified later using object methods
- The width property works independently of the height property
Conclusion
The width property in FabricJS provides precise control over triangle dimensions. By setting custom width values, you can create triangles of various sizes to fit your canvas design requirements.
229 Views
