In this article, we are going to create a canvas with a not-allowed cursor using FabricJS. A not-allowed cursor can be used to indicate that any action that has been requested, will not be carried out. not-allowed is one of the native cursor style available which can be used in ... Read More

In this article, we are going to how to add an object to the canvas by using the add method. After creating our canvas, we can populate it with various objects available in FabricJS like fabric. Circle, fabric.Ellipse or fabric.Line, etc.Syntaxcanvas.add(object: fabric.Object);Parametersobject − This parameter is of type fabric.Object and ... Read More

In this article, we are going to learn how to clone a canvas using FabricJS. We can clone a canvas instance by using the clone() method. Usually, this is useful when we want to send our canvas instance remotely to somewhere else, it is usually a good idea to send ... Read More

In this article, we are going to learn how to customize the viewport of the canvas using FabricJS. Viewport is the area which is visible to user on the canvas. We can customize the viewport by using the viewportTransform property which allows us to control the transformation of the viewportSyntaxnew ... Read More

In this article, we are going to learn how to add dashes to the border of a selection area on a canvas using FabricJS. We can achieve this by using the selectionDashArray property. It allows us to make the border of a selection area dashed.Syntaxnew fabric.Canvas(element: HTMLElement|String, { selectionDashArray: Array ... Read More

In this article, we are going to learn how to enable centered scaling on a canvas using FabricJS. In FabricJS, an object gets transformed proportionally when dragged from the corners. We can use the centeredScaling property to use the center as the origin of transformation.Syntaxnew fabric.Canvas(element: HTMLElement|String, { centeredScaling: Boolean ... Read More

In this article, we are going to learn how to resize an object non-uniformly via corner points using FabricJS. In FabricJS, an object gets transformed proportionally when dragged from the corners. However, we can control this behavior by pressing the uniScaleKey.Syntaxnew fabric.Canvas(element: HTMLElement|String, { uniScaleKey: String }: Object)Parameterselement − This ... Read More

In this article, we are going to learn how to set the width of a selection area border on a canvas using FabricJS. A selection area indicates the area selected using the mouse and all objects under that area will get selected. FabricJS allows us to adjust the width of ... Read More

In this article, we are going to learn how to set the color of a selection area on a canvas using FabricJS. We can adjust the color using the selectionColor property.Syntaxnew fabric.Canvas(element: HTMLElement|String, { selectionColor: String }: Object)Parameterselement − This parameter is the element itself which can be derived ... Read More

In this article, we are going to learn how to set the border color of a selection area on a canvas using FabricJS. A selection indicates whether a group selection should be enabled or not. FabricJS allows us to adjust the border color accordingly with the selectionBorderColor property.Syntaxnew fabric.Canvas(element: HTMLElement|String, ... Read More