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 disable selection of objects via dragging in a canvas using FabricJS?
In this article, we are going to illustrate how you can disable the selection of objects via dragging in FabricJS. In a FabricJS canvas, we can basically click anywhere and select an area and any object in that area will get selected. In this article, we will see how to disallow this behavior.
Syntax
new fabric.Canvas(element: HTMLElement|String, {selection: boolean}: 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, properties such as color, cursor, border width, and a lot of other properties can be changed related to the canvas. The selection parameter indicates whether selection should be enabled. The default value of this key is True.
Example 1: Selection Enabled (Default Behavior)
Let us first see how a selection via dragging looks like when it is enabled. For this example, we will pass the selection key as True which is also the default value. Let's see how the canvas behaves with selection enabled.
<!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>Selection Enabled - Default Behavior</h2>
<p>Here you can select the object as the selection key is True</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selection: true
});
// Creating an instance of the fabric.Circle class
var cir = new fabric.Circle({
radius: 40,
fill: "#87a96b",
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: Selection Disabled
The selection key specifies whether the selection of objects in the canvas via dragging should be enabled or disabled. If we set that key to False, then we will no longer be able to select objects via dragging.
<!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>Selection Disabled</h2>
<p>Here you cannot select an area around the object as the selection key is set to False.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selection: false
});
// Creating an instance of the fabric.Circle class
var cir = new fabric.Circle({
radius: 40,
fill: "#87a96b",
left: 30,
top: 20,
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Differences
When selection is set to false, users cannot create selection rectangles by dragging on the canvas. However, individual objects can still be selected by clicking directly on them. This provides more controlled interaction where only intentional object selection is allowed.
| Property Value | Drag Selection | Click Selection | Use Case |
|---|---|---|---|
selection: true |
Enabled | Enabled | Default editing behavior |
selection: false |
Disabled | Enabled | Controlled object selection |
Conclusion
By setting the selection property to false in FabricJS, you can disable area selection via dragging while still allowing individual object selection. This provides better control over user interactions with canvas objects.
3K+ Views
