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
Delete Operation for Selected Object in Fabric.js
We can create a Polygon object by creating an instance of fabric.Polygon. A polygon object can be characterized by any closed shape consisting of a set of connected straight line segments. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc.
In order to implement delete operation only for a selected object, we need to use the remove method.
Syntax
remove( ...Object): Self
Parameters
Object ? This property accepts a fabric.Object value which is the object that we want to remove.
Example 1: Implementing Delete Operation only for Selected Object Programmatically on Polygon
Let's see a code example to understand how we can implement delete operation for selected polygon object by using FabricJS. The remove method allows us to remove an object from the canvas. In this case, we have created a deleteHandler which will be called whenever a mouse:down event occurs. Therefore, on clicking on an object, it will be removed from the 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>
Implementing delete operation only for selected object programmatically on Polygon
</h2>
<p>
You can see that on clicking on an object, it instantly gets removed from the canvas
</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating a points array
var points = [
{ x: 30, y: 50 },
{ x: 70, y: 50 },
{ x: 0, y: 0 },
{ x: 70, y: 0 },
];
// Initiating a polygon object
var polygon1 = new fabric.Polygon(points, {
left: 100,
top: 40,
fill: "#1e90ff",
strokeWidth: 4,
stroke: "black",
scaleX: 1.2,
scaleY: 1.2,
});
// Initiating another polygon object
var polygon2 = new fabric.Polygon(
[
{ x: 60, y: 90 },
{ x: 45, y: 30 },
{ x: 20, y: 48 },
],
{
left: 30,
top: 30,
fill: "#080808",
strokeWidth: 4,
stroke: "red",
scaleX: 2,
scaleY: 2,
}
);
// Adding them to the canvas
canvas.add(polygon1, polygon2);
// Initiating a function called deleteHandler
var deleteHandler = function removeFunction(obj) {
var selectedObject = obj.target;
canvas.remove(selectedObject);
canvas.renderAll();
};
// Using the mouse:down event
canvas.on("mouse:down", deleteHandler);
</script>
</body>
</html>
Example 2: Implementing Delete Operation only for Selected Object Programmatically on Circle
Let's see a code example to understand how we can implement delete operation for a selected circle object by using FabricJS. We have initialized two circle objects namely circle1 and circle2 and added them to the canvas. Further, we have used the remove method similarly which will remove the object on it being selected.
<!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>
Implementing delete operation only for selected object programmatically on Circle
</h2>
<p>
You can see that on clicking on an object, it instantly gets removed from the canvas
</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating a circle object
var circle1 = new fabric.Circle({
left: 100,
top: 80,
radius: 30,
fill: "#1e90ff",
strokeWidth: 4,
stroke: "black",
scaleX: 1.2,
scaleY: 1.2,
});
// Initiating another circle object
var circle2 = new fabric.Circle({
radius: 15,
left: 30,
top: 30,
fill: "#080808",
strokeWidth: 4,
stroke: "red",
scaleX: 2,
scaleY: 2,
});
// Adding them to the canvas
canvas.add(circle1, circle2);
// Initiating a function called deleteHandler
var deleteHandler = function removeFunction(obj) {
var selectedObject = obj.target;
canvas.remove(selectedObject);
canvas.renderAll();
};
// Using the mouse:down event
canvas.on("mouse:down", deleteHandler);
</script>
</body>
</html>
Conclusion
In this tutorial, we used two simple examples to demonstrate how to implement delete operation only for selected object programmatically using FabricJS.
1K+ Views
