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 progress cursor using FabricJS?
In this article, we are going to create a canvas with a progress cursor using FabricJS. A progress cursor indicates that a program is busy in the background but allows the user to interact with the interface. progress 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., which are reusing the native cursor under the hood. Each of these cursors look slightly different based on operating system.
Syntax
new fabric.Canvas(element: HTMLElement|String, { defaultCursor: 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 color, cursor, border width and a lot of other properties can be changed related to the canvas, of which defaultCursor is a property with which we can set the type of cursor.
Example 1: Basic Progress Cursor
The defaultCursor property accepts a String which determines the name of the cursor to be used on the canvas. We will set it to progress to use the progress cursor. Let's see a code to create a canvas with a progress cursor 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 progress cursor using FabricJS</h2>
<p>Bring the cursor inside the canvas to see the changed shape of cursor</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
defaultCursor: "progress"
});
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Progress Cursor with Canvas Objects
In this example, we will add a circle to the canvas along with the progress cursor to demonstrate how objects interact with the custom cursor.
<!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 progress cursor using FabricJS</h2>
<p>Here we have added a circle to the canvas along with a progress cursor</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
defaultCursor: "progress"
});
// Initiate a Circle instance
var circle = new fabric.Circle({
radius: 50,
fill: "green",
left: 100,
top: 50
});
// Render the circle in canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Points
The
defaultCursorproperty changes the cursor appearance when hovering over the canvas areaThe progress cursor is useful for indicating background processes while maintaining user interaction
Canvas objects will still be selectable and movable with the progress cursor active
Different operating systems may render the progress cursor with slight visual variations
Conclusion
Setting a progress cursor in FabricJS is straightforward using the defaultCursor property. This feature enhances user experience by providing visual feedback during background operations while keeping the canvas interactive.
292 Views
