Rahul Gurung

Rahul Gurung

490 Articles Published

Articles by Rahul Gurung

490 articles

How to find the rotation matrix of a Polygon object using FabricJS?

Rahul Gurung
Rahul Gurung
Updated on 15-Mar-2026 324 Views

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. In order to find the rotation matrix, we use the _calcRotateMatrix() method. This method returns an Array with given values [cosA, sinA, -sinA, cosA, 0, 0] where A is the angle of rotation in degrees. Syntax _calcRotateMatrix(): Array Return Value ...

Read More

How a Polygon is different from a Polyline in FabricJS?

Rahul Gurung
Rahul Gurung
Updated on 15-Mar-2026 511 Views

We can create a Polyline object by creating an instance of fabric.Polyline while fabric.Polygon can be used to create a Polygon instance. 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 polygon always connects the first point to the last to make a closed area while a polyline doesn't. This can be proved by the examples given below. Syntax new fabric.Polyline(points: Array, options: Object) new fabric.Polygon(points: Array, options: ...

Read More

How to change the source of an Image using FabricJS?

Rahul Gurung
Rahul Gurung
Updated on 15-Mar-2026 2K+ Views

In this tutorial, we are going to learn how to change the source of an Image using FabricJS. Source can be a new url of image also. We can create an Image object by creating an instance of fabric.Image. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc. In order to change the source of an Image, we use the setSrc method. Syntax setSrc(src: String, callback: function, options: Object): fabric.Image Parameters src − This parameter accepts a String which ...

Read More

How to find the translation matrix of a Polygon object using FabricJS?

Rahul Gurung
Rahul Gurung
Updated on 15-Mar-2026 291 Views

A translation slides an object to a fixed distance in a given direction. 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. In order to find the translation matrix, we use the _calcTranslateMatrix() method. This method returns an Array with given values [1, 0, 0, 1, A, B]; where A is the X-coordinate and ...

Read More

How to check if an Image has crop applied using FabricJS?

Rahul Gurung
Rahul Gurung
Updated on 15-Mar-2026 321 Views

In this tutorial, we are going to show how you can check if an Image has crop applied using FabricJS. We can create an Image object by creating an instance of fabric.Image. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc. In order to find whether an Image has crop applied, we use the hasCrop method. This method returns false in case of crop is not applied, or the applied crop value in case if it is applied. Syntax hasCrop(): Boolean | Number ...

Read More

Adding a pattern with image and colour to a Polygon using FabricJS

Rahul Gurung
Rahul Gurung
Updated on 15-Mar-2026 1K+ Views

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. In order to add pattern with image and colour to a Polygon, we can use the Pattern class in FabricJS. Syntax new fabric.Pattern( options: Object, callback: function ) Parameters ...

Read More

How to highlight an object when a mouse is hovered over it using FabricJS?

Rahul Gurung
Rahul Gurung
Updated on 15-Mar-2026 2K+ Views

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. FabricJS provides us with an extensive set of events with which we can create different effects. Since we want the change to occur when the mouse is hovered, we will use the mouse:move event which is fired when the mouse is moved. Our second requirement ...

Read More

Adding fade-in and fade-out animation to a Polygon object using FabricJS

Rahul Gurung
Rahul Gurung
Updated on 15-Mar-2026 560 Views

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. In order to add fade-in and fade-out animation, we can use the opacity property in conjunction with animate method. Syntax animate(property: String | Object, value: Number | Object): fabric.Object | fabric.AnimationContext | Array. Parameters property ...

Read More

Adding rotation animation to a Polygon object using FabricJS

Rahul Gurung
Rahul Gurung
Updated on 15-Mar-2026 475 Views

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. In order to add rotation animation, we can use the angle property in conjunction with animate method. Syntax animate(property: String | Object, value: Number | Object): fabric.Object | fabric.AnimationContext | Array. Parameters ...

Read More

How to implement copy paste programmatically using FabricJS?

Rahul Gurung
Rahul Gurung
Updated on 15-Mar-2026 980 Views

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. In order to implement copy paste programmatically, we need to use the clone method. Syntax clone(callback: Function, propertiesToInclude: Array) Parameters callback (optional) − This parameter is a callback function which is invoked with a clone as its ...

Read More
Showing 1–10 of 490 articles
« Prev 1 2 3 4 5 49 Next »
Advertisements