Home > Article > Web Front-end > How to create a canvas with a disallowed cursor using FabricJS?
How to create a canvas with a disallowed cursor using FabricJS?
- WBOYforward
- 2023-09-08 10:21:03847browse
In this article, we will use FabricJS to create a canvas with a disallowed cursor. A disallowed cursor can be used to indicate that any requested operation will not be performed. not-allowed is one of the native cursor styles available and can also be used in FabricJS canvas.
FabricJS provides various types of cursors like default, full scroll, crosshair, column resize, row resize, etc. which are reusing the native cursor underlying. Each cursor looks slightly different depending on the operating system.
Syntax
new fabric.Canvas(element: HTMLElement|String, { defaultCursor: String }: Object)Parameters
Element - This parameter is
Options (optional) - This parameter is an object that provides additional customization of our canvas. Using this parameter, you can change many properties related to the canvas, such as color, cursor, and border width. DefaultCursor is a property through which we can set the cursor type we want.
Example 1
The defaultCursor property accepts a string that determines the name of the cursor to use on the canvas. We set it to not-allowed to use cursors that are not allowed. Let's look at an example of creating a canvas with a disallowed 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 disallowed 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>The above is the detailed content of How to create a canvas with a disallowed cursor using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!