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 crosshair cursor on hover over objects using FabricJS?
In this article, we are going to create a canvas with a crosshair cursor on hover using FabricJS. The crosshair is one of the native cursor styles available which can be used in FabricJS canvas. FabricJS provides various cursor types like default, all-scroll, crosshair, col-resize, row-resize etc., which reuse native CSS cursors. The hoverCursor property sets the cursor style when hovering over canvas objects.
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. The FabricJS canvas will be initialized on this element.
-
options (optional) ? This parameter is an Object which provides additional customizations to the canvas. Using this parameter, properties like color, cursor, border width and many others can be changed. The
hoverCursorproperty sets the default cursor value when hovering over objects on the canvas.
Example 1: Passing hoverCursor to Constructor
The hoverCursor property accepts a String which determines the cursor name to be used on hovering over canvas objects. Let's create a canvas with a crosshair 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 crosshair 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: "crosshair",
});
// Creating an instance of the fabric.Circle class
var cir = new fabric.Circle({
radius: 60,
fill: "#ff91a4",
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 have a circle and rectangle object. By assigning hoverCursor the value "crosshair" using dot notation, when we hover over any object in the canvas, our cursor will change to crosshair 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 crosshair 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 = "crosshair";
// Creating an instance of the fabric.Circle class
var cir = new fabric.Circle({
radius: 40,
fill: "#ccccff",
left: 30,
top: 20,
});
// Creating an instance of the fabric.Rect class
var rect = new fabric.Rect({
left: 170,
top: 150,
width: 60,
height: 80,
fill: "#96ded1",
angle: 90,
});
// Adding objects to the canvas
canvas.add(cir);
canvas.add(rect);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Points
- The
hoverCursorproperty can be set during canvas initialization or using dot notation - Available cursor types include: default, crosshair, pointer, move, col-resize, row-resize, all-scroll
- The crosshair cursor is useful for precision tasks like drawing or selecting specific points
Conclusion
FabricJS makes it easy to customize cursor behavior on canvas hover using the hoverCursor property. The crosshair cursor provides a precise targeting experience for users interacting with canvas objects.
872 Views
