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 Circle with text cursor on hover over objects using FabricJS?
In this tutorial, we are going to create a Circle with a text cursor on hover over objects using FabricJS. The text cursor is one of the native cursor styles available which can be used in the FabricJS canvas. FabricJS provides various types of cursors like default, all-scroll, crosshair, col-resize, row-resize etc. which reuse the native cursor underneath. The hoverCursor property sets the style of the cursor when hovered over a canvas object.
Syntax
new fabric.Circle({ hoverCursor: String }: Object)
Parameters
-
options (optional) ? This parameter is an Object which provides additional customizations to our circle. Using this parameter, properties such as colour, cursor, stroke width and many other properties can be changed related to the object of which
hoverCursoris 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 cursor value when hovering over the circle object on the canvas.
Example 1: Basic Text Cursor on Hover
By default, when we hover over a circle object in the canvas, the cursor type is "move". Let's see an example to create a canvas with a text cursor while hovering over a circle 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>Creating a circle with text cursor on hover over objects using FabricJS</h2>
<p>Hover the mouse over the object to see changed shape of the cursor. Here we have used the <b>text</b> cursor on hover. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 100,
fill: "white",
radius: 50,
stroke: "black",
strokeWidth: 5,
hoverCursor: "text"
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Demonstrating Individual Object Behavior
In this example, we are passing the hoverCursor key to a specific circle instance 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 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>Creating a circle with text cursor on hover over objects using FabricJS</h2>
<p>Move the cursor over the objects. You will get to see the <b>text</b> cursor when you hover the mouse over the left circle. We have not applied the <b>hoverCursor</b> property on the right circle, which shows the default <b>move</b> cursor. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 100,
fill: "white",
radius: 50,
stroke: "black",
strokeWidth: 5,
hoverCursor: "text"
});
var circle2 = new fabric.Circle({
left: 315,
top: 100,
fill: "#b22222",
radius: 50
});
// Adding it to the canvas
canvas.add(circle);
canvas.add(circle2);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Available Cursor Types
Besides "text", FabricJS supports various other cursor types for the hoverCursor property:
- default - Default arrow cursor
- move - Four-directional arrows (default for objects)
- pointer - Hand pointer cursor
- crosshair - Crosshair cursor
- text - I-beam text cursor
- wait - Loading/busy cursor
Conclusion
The hoverCursor property in FabricJS allows you to customize cursor appearance when hovering over canvas objects. This property works per object instance, giving you fine control over user interaction feedback.
571 Views
