How to create a canvas with Polyline 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.

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

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: "green",
      });
      
      // Adding it to the canvas
      canvas.add(polyline);
   </script>
</body>
</html>

Example 2: Manipulating the Polyline object by using the set method

In this example, we have assigned the properties to the Polyline object 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 Polyline object by using the set method</h2>
   <p>You can see the Polyline object in canvas now  with set values</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);
      
      // Set the properties
      polyline.set("stroke", "blue");
      polyline.set("strokeWidth", 5);
      polyline.set("top", 50);
      polyline.set("left", 100);
      polyline.set("scaleX", 2);
      polyline.set("scaleY", 2);
      
      // Adding it to the canvas
      canvas.add(polyline);
   </script>
</body>
</html>