Open In App

How to create a canvas polygon using Fabric.js ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to see how to create a canvas polygon using FabricJS. The canvas means the polygon is movable and can be stretched according to requirements. Further, the polygon can be customized when it comes to the initial fill color and its coordinates.

Approach: To make it possible we are going to use a JavaScript library called FabricJS. After importing the library, we will create a canvas block in the body tag which will contain our polygon. After this, we will initialize instances of Canvas and Polygon provided by FabricJS and render the Polygon instance on the Canvas instance as given in the example below. 

Syntax:

 fabric.Polygon(points, options); 

Parameters: This function accepts two parameters as mentioned above and described below:

  • points: It specifies the starting and ending coordinates for all the points of the polygon.
  • options: It specifies the additional options to be applied.

Example: This example uses FabricJS to create a simple editable canvas polygon. 

html




<!DOCTYPE html>
<html>
<head>
    <title>
        How to create a canvas polygon using Fabric.js?
    </title>
  
    <!-- Loading the FabricJS library -->
    <script src=
    </script>
</head>
  
<body>
    <canvas id="canvas"
            width="600"
            height="200"
            style="border:1px solid #000000;">
    </canvas>
  
    <script>
  
        // Initiate a Canvas instance
        var canvas = new fabric.Canvas("canvas");
  
        // Initiate a polygon instance
        var polygon = new fabric.Polygon([
        { x: 200, y: 10 },
        { x: 250, y: 50 },
        { x: 250, y: 180},
        { x: 150, y: 180},
        { x: 150, y: 50 }], {
            fill: 'green'
        });
  
        // Render the polygon in canvas
        canvas.add(polygon);
    </script>
</body>
</html>


Output:

 



Last Updated : 07 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads