Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create Canvas with Not Allowed Cursor on Hover Using Fabric.js
In this article, we are going to create a canvas with a not-allowed cursor on hover using FabricJS. 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., 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: HTMLElement|String, { hoverCursor: String }: Object)
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 a lot of other properties can be changed related to the canvas, of which hoverCursor is a property with which we can set the default cursor value when hovering over an object on the canvas.
Example 1
Passing the hoverCursor key to the class
The hoverCursor property accepts a String which determines the name of the cursor to be used on hovering over the canvas object. Let's see a code example to create a canvas with a not-allowed cursor on hover 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>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
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 the hoverCursor using the dot notation
In this example, we have a rectangle object and an ellipse object and by assigning hoverCursor the value "not-allowed", when we hover over any object in the canvas, our cursor will change into 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");
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,
});
var ellipse = new fabric.Ellipse({
top: 76,
left: 210,
fill: "#cd5b45",
stroke: "#dcdcdc",
strokeWidth: 1,
rx: 30,
ry: 50,
});
// Adding it to the canvas
canvas.add(rect);
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
334 Views
