In this article, we are going to learn how to set a custom key to enable/disable uniform scaling in FabricJS. In FabricJS, an object gets transformed proportionally when dragged from its corners. This is called uniform scaling. However, we can enable/disable this behavior by using the uniScaleKey.Syntaxnew fabric.Canvas(element: HTMLElement|String, { ... Read More

In this article, we are going to learn how to enable the selection of an object only when it is fully contained in the selection area using FabricJS. We can use the selectionFullyContained property to achieve this.Syntaxnew fabric.Canvas(element: HTMLElement|String, { selectionFullyContained: Boolean }: Object)Parameterselement − This parameter is the ... Read More

In this article, we are going to learn about how to disable uniform scaling in canvas using FabricJS. In FabricJS, an object gets transformed proportionally when dragged from the corners. However, we can disable this behavior by using the uniformScaling propertySyntaxnew fabric.Canvas(element: HTMLElement|String, { uniformScaling: Boolean }: Object)Parameterselement − This ... Read More

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