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 implement the delete-all operation programmatically using FabricJS?
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-all programmatically, we need to use the clear method. This method clears all the contexts of an instance and removes all objects from the canvas.
Syntax
clear(): fabric.Canvas
Parameters
The clear() method does not accept any parameters and returns the fabric.Canvas instance for method chaining.
Example 1: Implementing Delete-All Programmatically on Polygon
Let's see a code example to understand how we can implement delete-all programmatically on Polygon. We have created a function called Remove() which will be called when we click on the Remove button. Here, we have used the clear() method to remove all instances of Polygon 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-all programmatically on Polygon</h2>
<p>
You can click on the Remove button which removes all instances of Polygon from the canvas
</p>
<button id="btn" onclick="Remove()" style="padding: 3px">Remove</button>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating Remove function
function Remove() {
canvas.clear().renderAll();
}
// Initiating a polygon object
var polygon1 = new fabric.Polygon(
[
{ x: 30, y: 50 },
{ x: 70, y: 50 },
{ x: 0, y: 0 },
{ x: 70, y: 0 },
],
{
left: 110,
top: 40,
fill: "#1e90ff",
strokeWidth: 4,
stroke: "black",
scaleX: 1.5,
scaleY: 1.5,
objectCaching: false,
}
);
// Initiating another polygon object
var polygon2 = new fabric.Polygon(
[
{ x: 60, y: 90 },
{ x: 100, y: 20 },
{ x: 55, y: 40 },
{ x: 75, y: 50 },
],
{
left: 200,
top: 60,
fill: "#080808",
strokeWidth: 4,
stroke: "red",
scaleX: 1.5,
scaleY: 1.5,
objectCaching: false,
}
);
// Adding them to the canvas
canvas.add(polygon1, polygon2);
</script>
</body>
</html>
Example 2: Implementing Delete-All Programmatically on Rectangle
Let's see a code example to understand how we can implement delete-all programmatically on Rectangle. We have initiated two rectangle objects and added them to the canvas. As soon as we click on the Remove button, all the objects 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-all programmatically on Rectangle</h2>
<p>
You can click on the Remove button which removes all instances of rectangle from the canvas
</p>
<button id="btn" onclick="Remove()" style="padding: 3px">Remove</button>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating Remove function
function Remove() {
canvas.clear().renderAll();
}
// Initiating a rectangle object
var rectangle1 = new fabric.Rect({
width: 50,
height: 30,
left: 110,
top: 40,
fill: "#1e90ff",
strokeWidth: 4,
stroke: "black",
objectCaching: false,
});
// Initiating another rectangle object
var rectangle2 = new fabric.Rect({
width: 50,
height: 30,
left: 200,
top: 60,
fill: "#080808",
strokeWidth: 4,
stroke: "red",
objectCaching: false,
});
// Adding them to the canvas
canvas.add(rectangle1, rectangle2);
</script>
</body>
</html>
Key Points
- The
clear()method removes all objects from the canvas at once - It returns the fabric.Canvas instance, allowing method chaining
- After calling
clear(), you may need to callrenderAll()to refresh the canvas display - This method is useful for reset functionality in drawing applications
Conclusion
The clear() method in FabricJS provides a simple way to implement delete-all functionality programmatically. It removes all objects from the canvas efficiently and can be easily integrated into user interface controls.
593 Views
