Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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 disable the interactivity of canvas using FabricJS?
In this article, we are going to learn how to disable the interactivity of canvas in FabricJS. The interactive layer on top of each object is one of the unique features of FabricJS. As soon as we initialize a canvas, it's possible to select the objects, drag them around or manipulate a group selection. However, all this can be undone by assigning the interactive property to False.
Syntax
new fabric.Canvas(element: HTMLElement|String, { interactive : 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, of which interactive is a property with which we can decide whether we want an interactive canvas or not. The default value of this property is True.
Example 1
When the interactive property is enabled
When interactivity is enabled, we can drag the objects around freely, select them and manipulate them as we like. We can see that in the code 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>Disabling the interactivity of canvas</h2>
<p>Here you can drag the object and manipulate them freely as we have set the <b>interactive</b> property to True. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
interactive: true,
});
// Creating an instance of the fabric.Rect class
var obj1 = new fabric.Rect({
left: 170,
top: 90,
width: 60,
height: 80,
fill: "#966fd6",
angle: 90,
});
var obj2 = new fabric.Rect({
left: 200,
top: 120,
width: 60,
height: 80,
fill: "#ffa343",
angle: 56,
});
// Adding it to the canvas
canvas.add(obj1);
canvas.add(obj2);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Example 2
Passing the interactive key to the class
Let's see a code example of how we can disable the interactivity of a canvas. We can assign the interactive property a False value which would get rid of the layer of interactivity on top of the objects in a canvas.
<!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>Disabling the interactivity of canvas</h2>
<p>Here you cannot select an area around the objects and manipulate them freely, as we have set the <b>interactive</b> property as False. </b>
</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
interactive: false,
});
// Creating an instance of the fabric.Rect class
var obj1 = new fabric.Rect({
left: 170,
top: 90,
width: 60,
height: 80,
fill: "#966fd6",
angle: 90,
});
var obj2 = new fabric.Rect({
left: 200,
top: 120,
width: 60,
height: 80,
fill: "#ffa343",
angle: 56,
});
// Adding it to the canvas
canvas.add(obj1);
canvas.add(obj2);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
1K+ Views
