How to create a Rectangle with wait cursor on hover over objects using FabricJS?

In this tutorial, we are going to create a Rectangle with a wait cursor on hover over objects using FabricJS. wait is one of the native cursorstyles 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., that reuse the native cursor under the hood. The hoverCursor property sets the style of the cursor when hovered over a canvas object.

Syntax

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

Parameters

Options (optional) − This parameter is an Object which provides additional customizations to our rectangle. Using this parameter colour, 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. Using this we can set the default cursor value when hovering over this rectangle object on the canvas.

Example 1

Passing the hoverCursor key to the class

By default, when we hover over a rectangle object in the canvas, the cursor type is move. Let’s see a code example to create a canvas with a wait cursor while hovering over a rectangle object in FabricJS.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Passing the hoverCursor key to the class</h2>
   <p>Hover over the rectangle to see the wait cursor</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#faf0e6",
         padding: 9,
         stroke: "#9370db",
         strokeWidth: 5,
         hoverCursor: "wait",
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Example 2

Demonstrating that it affects the instance only

In this example, we are passing the hoverCursor key to the rectangle 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. This is illustrated in the code example below −

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Demonstrating that it affects the instance only</h2>
   <p>Hover over the rectangle objects to see that wait cursor applies to the left rectangle only. We have not applied the <b>hoverCursor</b> property on the rectangle that is on the right.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect1 = new fabric.Rect({
         left: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "#faf0e6",
         padding: 9,
         stroke: "#9370db",
         strokeWidth: 5,
         hoverCursor: "wait",
      });

      // Initiate another rectangle object
      var rect2 = new fabric.Rect({
         left: 325,
         top: 90,
         width: 170,
         height: 70,
         fill: "#9370db",
         padding: 9,
         stroke: "#e6e6fa",
         strokeWidth: 5,
      });

      // Add them to the canvas
      canvas.add(rect1);
      canvas.add(rect2);
   </script>
</body>
</html>