Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a canvas with not-allowed cursor on hover over objects using FabricJS?
In this article, we are going to create a canvas with a not-allowed cursor on hover using FabricJS. The not-allowed cursor is one of the native cursor styles available which can be used in FabricJS canvas. 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.Canvas(element, { hoverCursor: "not-allowed" })
Parameters
-
element ? This parameter is the <canvas> element itself which can be derived using document.getElementById() or the id of the <canvas> 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, properties such as color, cursor, border width, and many other properties can be changed. The hoverCursor property sets the cursor style when hovering over canvas objects.
Example 1: Passing hoverCursor to Canvas Constructor
The hoverCursor property accepts a String which determines the name of the cursor to be used on hovering over canvas objects. Let's see how to create a canvas with a not-allowed cursor on hover.
<!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>Canvas with not-allowed cursor on hover over object using FabricJS</h2>
<p>Hover the mouse over the object to see how the cursor style changes.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance with not-allowed hover cursor
var canvas = new fabric.Canvas("canvas", {
hoverCursor: "not-allowed",
});
// Creating an instance of the fabric.Circle class
var cir = new fabric.Circle({
radius: 40,
fill: "#008b8b",
left: 30,
top: 20,
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Setting hoverCursor Using Dot Notation
In this example, we set the hoverCursor property after creating the canvas instance. We have a rectangle object and an ellipse object, and when we hover over any object in the canvas, our cursor will change to the not-allowed cursor type.
<!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>Canvas with not-allowed cursor on hover over objects using FabricJS</h2>
<p>There are two objects on this canvas. Hover the mouse over the objects to see how the cursor style changes.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Set hover cursor using dot notation
canvas.hoverCursor = "not-allowed";
// Creating an instance of the fabric.Rect class
var rect = new fabric.Rect({
left: 180,
top: 80,
width: 90,
height: 150,
fill: "#4169e1",
angle: 82,
});
// Creating an ellipse object
var ellipse = new fabric.Ellipse({
top: 76,
left: 210,
fill: "#cd5b45",
stroke: "#dcdcdc",
strokeWidth: 1,
rx: 30,
ry: 50,
});
// Adding objects to the canvas
canvas.add(rect);
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Comparison of Methods
| Method | When to Use | Flexibility |
|---|---|---|
| Constructor Option | Set cursor during canvas creation | Fixed at initialization |
| Dot Notation | Change cursor after canvas creation | Can be modified dynamically |
Common Cursor Types
Besides "not-allowed", you can use other cursor types like:
-
default- Default cursor -
pointer- Hand pointer cursor -
move- Move cursor -
crosshair- Crosshair cursor -
text- Text selection cursor
Conclusion
The hoverCursor property in FabricJS allows you to customize the cursor appearance when hovering over canvas objects. You can set it either during canvas initialization or dynamically using dot notation, providing a better user experience by indicating interaction states.
432 Views
