How to create a canvas with not-allowed cursor using FabricJS?

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 the FabricJS canvas too.

FabricJS provides various types of cursors like default, all-scroll, crosshair, col-resize, row-resize etc. which are reusing the native cursor underhood. Each of these cursors look slightly different based on operating system.

Syntax

new fabric.Canvas(element: HTMLElement|String, { defaultCursor: String }: Object)

Parameters

• element ? This parameter is the element itself which can be derived using document.getElementById() or the id of the element itself. The FabricJS canvas will be initialized on this element.

• options (optional) ? This parameter is an Object which provides additional customizations to our canvas. Using this parameter color, cursor, border width and a lot of other properties can be changed related to the canvas, of which defaultCursor is a property with which we can set the type of cursor that we want.

Example 1

The defaultCursor property accepts a String which determines the name of the cursor to be used on the canvas. We will set it to not-allowed to use the not allowed cursor. Let's see an example, to create a canvas with a not-allowed cursor in FabricJS.

   
   


   
Canvas with not-allowed cursor using FabricJS
   
Bring the cursor inside the canvas to see the changed shape of cursor
   
   

Example 2

In this example, we will add a circle to the canvas along with the not-allowed cursor

   
   


   
Canvas with not-allowed cursor using FabricJS
   
Here we have added a circle to the canvas along with the not-allowed cursor