Skip to content
Related Articles

Related Articles

How to create a canvas polygon using Fabric.js ?
  • Last Updated : 19 May, 2020

In this article, we are going to see how to create a canvas polygon using FabricJS. The canvas means polygon is movable and can be stretched according to requirement. 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.

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




<!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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :