How to create an Ellipse with progress cursor on hover over objects using FabricJS?

In this tutorial, we are going to create an Ellipse with a progress cursor on hover over objects using FabricJS. Progress is one of the native cursor styles 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. The hoverCursor property sets the style of the cursor when hovered over a canvas object.

Syntax

new fabric.Ellipse({ hoverCursor: String }: Object)

Parameters

• options (optional) ? This parameter is an Object which provides additional customizations to our ellipse. Using this parameter, properties such as color, cursor, stroke width, and a lot of other properties can be changed related to the object of which hoverCursor is a property.

Options Keys

• hoverCursor ? This property accepts a String which determines the name of the cursor to be used on hovering over the canvas object. By using this property, we can set the default cursor value when hovering over the ellipse object on the canvas.

Example 1

Passing the hoverCursor Key to the class

By default, when we hover over an ellipse object in the canvas, the cursor type is "move". Let's see an example, to create a canvas with a progress cursor while hovering over an ellipse object in FabricJS.

   
      
      
   

   
      
Creating an Ellipse with progress cursor on hover over objects using FabricJS
      
Hover the mouse over the ellipse to see the progress cursor. 
      

      
   

Example 2

Demonstrating that this effects the instance only

In this example, we are passing the hoverCursor key to the ellipse class which means that the hoverCursor property would not be changed for every object in the canvas. Changes will only occur for that single object.

   
      
      
   

   
      
Creating an Ellipse with progress cursor on hover over objects using FabricJS
      
Hover the mouse over the objects. You will get to see the progress cursor on the left ellipse. We haven't applied the hoverCursor property to the right ellipse.