- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a canvas with Polyline using FabricJS?
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>