How to draw a triangle with Polyline class using FabricJS?

FabricJS Javascript Library Front End Technology

We can create a Polyline object by creating an instance of fabric.Polyline. A polyline object can be characterised by a set of connected straight-line segments. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity, etc. A triangle is a three-sided polygon, which has three vertices.

Syntax

new fabric.Polyline(points: Array, options: Object)

Parameters

points − This parameter accepts an Array which denotes the array of points that make up the polyline object.
options (optional) − This parameter is an Object which provides additional customizations to our object. Using this parameter origin, stroke width and a lot of other properties can be changed related to the Polyline object.

Example 1: Creating an Instance of fabric.Polyline() and Adding it to our Canvas

Before creating a start, let’s see a code example of how we can add a polyline object to our canvas. The only required parameter is the points Array whereas the second argument is the optional options object.

<!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.Polyline() and adding it to our canvas </h2>
   <p>You can see that the polyline object has been added</p>
   <canvas id="canvas"></canvas> 
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating a points array
      var points = [
         { x: 30, y: 50 },
         { x: 0, y: 0 },
         { x: 60, y: 0 },
      ];
      
      // Initiating a polyline object
      var polyline = new fabric.Polyline(points, {
         left: 100,
         top: 40,
         fill: "white",
         strokeWidth: 4,
         stroke: "brown",
      });
      
      // Adding it to the canvas
      canvas.add(polyline);
   </script>
</body>
</html>

Example 2: Creating a triangle with Polyline

In this example, we will create a triangle using the Polyline instance. We can select the coordinates in such a way that the shape forms a triangle as given below.

<!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 a triangle with Polyline</h2>
   <p>You can see the triangle in the canvas now</p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Create a points Array
      var points = [
         {
            x: 349.9,
            y: 75,
         },
         {
            x: 379,
            y: 160.9,
         },
         {
            x: 469,
            y: 160.9,
         },
         {
            x: 349.9,
            y: 75,
         },
      ];
      
      // Initiating a polyline object
      var polyline = new fabric.Polyline(points);
      
      // Set the properties
      polyline.set("stroke", "brown");
      polyline.set("strokeWidth", 5);
      polyline.set("fill", "white");
      polyline.set("top", 50);
      polyline.set("left", 100);
      polyline.set("scaleX", 0.75);
      polyline.set("scaleY", 0.75);
      
      // Adding it to the canvas
      canvas.add(polyline);
   </script>
</body>
</html>