Skip to content
Related Articles

Related Articles

Improve Article

How to create a canvas polygon using Fabric.js ?

  • Last Updated : 19 May, 2020
Geek Week

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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :