- 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 make a star with Polyline class 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. A star or pentagram consists of 10 isosceles triangles.
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: "green", }); // Adding it to the canvas canvas.add(polyline); </script> </body> </html>
Example 2: Creating a star with Polyline
In this example, we will create a star using the Polyline instance. We can select the coordinates in such a way that the shape forms a star 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 star with Polyline</h2> <p>You can see the star 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: 397, y: 214.9, }, { x: 423, y: 300.9, }, { x: 350, y: 249.9, }, { x: 276.9, y: 301, }, { x: 303, y: 215, }, { x: 231, y: 161, }, { x: 321, y: 161, }, { x: 349.9, y: 75, }, ]; // Initiating a polyline object var polyline = new fabric.Polyline(points); // Set the properties polyline.set("stroke", "blue"); 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>