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 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.
Syntax
clear(): fabric.Canvas
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>
Conclusion
In this tutorial, we used two simple examples to demonstrate how you can implement the delete-all operation programmatically using FabricJS.
301 Views
