FabricJS – How to set Polygon objects properties using function instead of constructor?

We can create a Polygon object by creating an instance of fabric.Polygon. A polygon object can be characterized by any closed shape consisting of 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

set(key: String, value: String | Boolean | Number | Object | Function)

Parameters

• key ? This parameter accepts an String which specifies the property we want to set.

• value ? This parameter accepts the value to be set for the property.

Example 1: Creating an Instance of fabric.Polygon() and Adding it to our Canvas

Let?s see a code example of how we can create a polygon by creating an instance of fabric.Polygon. It can be seen that we have added the properties of "top" and "left" by using the constructor.

   
   


   

      Creating an instance of fabric.Polygon() and adding it to our canvas
   
   
You can see that a Polygon object has been added to the canvas
    
   

 

Example 2: Using a Function to Set the Properties of Polygon Object

Let?s see a code example to see how the Polygon object looks like when a function is used to set the properties. Here we have initialized a function called addProperties which adds properties of "stroke", "left", "fill", "top" and "selectable" using the set method. As we call the function, these properties will be added to the object.

   
   


   
Using a function to set the properties of Polygon object
   
You can see that the properties have been added
   
   

Conclusion

In this tutorial, we used two simple examples to demonstrate how to set Polygon objects properties using a function instead of constructor using FabricJS.