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
How to create a canvas with not-allowed cursor using FabricJS?
In this article, we are going to create a canvas with a not-allowed cursor using FabricJS. A not-allowed cursor can be used to indicate that any action that has been requested, will not be carried out. 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. which are reusing the native cursor underhood. 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 that we want.
Example 1
The defaultCursor property accepts a String which determines the name of the cursor to be used on the canvas. We will set it to not-allowed to use the not allowed cursor. Let's see an example, to create a canvas with a not-allowed 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 not-allowed 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: "not-allowed"
});
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2
In this example, we will add a circle to the canvas along with the not-allowed 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 not-allowed cursor using FabricJS</h2>
<p>Here we have added a circle to the canvas along with the not-allowed cursor</p>
<canvas id="canvas"></canvas>
<script>
//Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
defaultCursor: "not-allowed"
});
// Initiate a Circle instance
var circle = new fabric.Circle({
radius: 50,
fill: "green"
});
// Render the circle in canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
210 Views
