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 create a canvas with Triangle using FabricJS?
In this tutorial, we are going to learn about how to create a canvas with a Triangle object 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.
Syntax
new fabric.Triangle({ width: Number, 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 triangle object of which width and height are properties.
Options Keys
-
width ? This property accepts a Number which specifies the object's width. Its default value is 100.
-
height ? This property accepts a Number which specifies the object's height. Its default value is 100.
Example 1: Creating a Basic Triangle
Creating an instance of fabric.Triangle() and adding it to our canvas
Let's see a code example of how we can add a triangle to our canvas. Here we have created an object with a width of 100px and height of 70px. Also, we have used the colour "orange" as a fill colour.
<!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>Creating an instance of fabric.Triangle() and adding it to our canvas</h2>
<p>You can move around the triangle and interact with it</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: 55,
top: 60,
width: 100,
height: 70,
fill: "orange",
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 2: Using the set() Method
Manipulating the Triangle object by using the set method
In this example, we have assigned the properties to the triangle by using the set method which is a setter for values. Any property related to stroke, strokeWidth, angle, scaling, rotation etc, can be mutated by using this method.
<!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>Manipulating the Triangle object by using the set method</h2>
<p>You can move around the triangle and interact with it</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();
// Set the properties using the set method
triangle.set("height", 70);
triangle.set("width", 100);
triangle.set("stroke", "#2a52be");
triangle.set("strokeWidth", 5);
triangle.set("fill", "#d9603b");
triangle.set("top", 60);
triangle.set("left", 55);
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Key Points
- The
fabric.Triangleclass creates interactive triangle objects that can be moved, scaled, and rotated - Properties can be set either in the constructor or using the
set()method - Common properties include
width,height,fill,stroke, and positioning properties likeleftandtop - Always remember to add the triangle object to the canvas using
canvas.add()
Conclusion
Creating triangles in FabricJS is straightforward using the fabric.Triangle class. You can customize the appearance and behavior through constructor options or the set() method for dynamic property updates.
521 Views
