Fabric.js 5 is a powerful JavaScript library for working with HTML5 canvas, offering an extensive range of features for creating and manipulating graphical objects. One common requirement in canvas applications is the ability to delete selected objects. In this blog, we will dive into the implementation of programmatically deleting selected objects in Fabric.js 5. By following this tutorial, you will gain a comprehensive understanding of how to leverage the remove method and apply it to various object types such as polygons and circles.

Understanding the Fabric.js 5 Polygon Object and Delete Operation

Overview of the fabric.Polygon object in Fabric.js 5

The fabric.Polygon object in Fabric.js 5 is a fundamental element that allows the creation of closed shapes consisting of connected straight line segments. Let's take a look at an example of creating a fabric.Polygon object:

<!-- Adding the Fabric JS Library from Cloudflare CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>


<canvas id="canvas"></canvas>
<script>
	// Initialize a canvas instance
	var canvas = new fabric.Canvas("canvas");
	canvas.setWidth(document.body.scrollWidth);
	canvas.setHeight(250);
  // Define the points for the first polygon
  var points1 = [
     { x: 30, y: 50 },
     { x: 70, y: 50 },
     { x: 0, y: 0 },
     { x: 70, y: 0 }
  ];

  // Create the first fabric.Polygon object
  var polygon1 = new fabric.Polygon(points1, {
     left: 100,
     top: 40,
     fill: "#1e90ff",
     strokeWidth: 4,
     stroke: "black",
     scaleX: 1.2,
     scaleY: 1.2
  });

  // Define the points for the second polygon
  var points2 = [
     { x: 60, y: 90 },
     { x: 45, y: 30 },
     { x: 20, y: 48 }
  ];

  // Create the second fabric.Polygon object
  var polygon2 = new fabric.Polygon(points2, {
     left: 30,
     top: 30,
     fill: "#080808",
     strokeWidth: 4,
     stroke: "red",
     scaleX: 2,
     scaleY: 2
  });

  // Add both polygon objects to the canvas
  canvas.add(polygon1, polygon2);
</script>

In this example, we define an array of points that represent the vertices of the polygon. We then create a fabric.Polygon object using these points and customize its appearance by specifying properties like fill color, stroke color, stroke width, and scaling.

Introduction to the remove method for deleting objects

The remove method is a crucial feature in Fabric.js 5 that allows the deletion of objects from the canvas. Let's see how the remove method works with an example:

// Removing an object from the canvas using the remove method
canvas.remove(polygon);

In this example, the remove method is called on the canvas, specifying the object (in this case, the polygon) to be removed. This will instantly remove the polygon object from the canvas, effectively deleting it from the graphical representation.

By understanding the fabric.Polygon object and the remove method, you gain the necessary knowledge to implement the delete operation selectively for objects in your Fabric.js 5 applications. In the following sections, we will delve deeper into the practical implementation of this functionality, providing code examples and step-by-step instructions for achieving the desired outcome.

Implementing Delete Operation for Selected Polygon Objects Programmatically

Implementing the deletePolygonHandler function for removing selected polygons:

In order to enable the delete operation for selected polygon objects in Fabric.js 5, we can implement a deletePolygonHandler function that will be triggered when a mouse:down event occurs. This function will identify the selected object and remove it from the canvas using the remove method. Let's take a look at the code example:

This function will identify the selected object and remove it from the canvas using the remove method. Let's take a look at the code example:

// Initiating the deleteHandler function
var deletePolygonHandler = function(obj) {
   var selectedObject = obj.target;
   canvas.remove(selectedObject);
   canvas.renderAll();
};

// Binding the deleteHandler function to the mouse:down event
canvas.on("mouse:down", deleteHandler);

In this example, we define the deletePolygonHandler function that takes the event object (obj) as a parameter. Inside the function, we extract the selected object using obj.target. Then, we call the remove method on the canvas, passing the selected object as an argument to remove it from the canvas. Finally, we use the canvas.renderAll() method to update the canvas and reflect the changes.

By binding the deletePolygonHandler function to the mouse:down event, whenever a polygon object is clicked on the canvas, the deletePolygonHandler function will be executed, resulting in the removal of the selected polygon.

Implementing the deletePolygonHandler function provides a simple and effective way to enable the delete operation only for the selected polygon objects in your Fabric.js 5 application. In the following sections, we will explore additional examples and techniques to enhance the functionality and user experience.

Enabling Selective Deletion of Circle Objects Programmatically

 <!-- Adding the Fabric JS Library from Cloudflare CDN -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>


<canvas id="canvas"></canvas>
<script>
	// Initialize a canvas instance
	var canvas = new fabric.Canvas("canvas");
	canvas.setWidth(document.body.scrollWidth);
	canvas.setHeight(250);
  // Define the points for the first circle
  var circle1 = new fabric.Circle({
     radius: 30,
     left: 100,
     top: 80,
     fill: "#1e90ff",
     strokeWidth: 4,
     stroke: "black",
     scaleX: 1.2,
     scaleY: 1.2
  });

  // Define the points for the second circle
  var circle2 = new fabric.Circle({
     radius: 15,
     left: 30,
     top: 30,
     fill: "#080808",
     strokeWidth: 4,
     stroke: "red",
     scaleX: 2,
     scaleY: 2
  });

  // Add both circle objects to the canvas
  canvas.add(circle1, circle2);

  // Define the deleteCircleHandler function
  var deleteCircleHandler = function(obj) {
     var selectedObject = obj.target;
     canvas.remove(selectedObject);
     canvas.renderAll();
  };

  // Bind the deleteCircleHandler function to the mouse:down event
  canvas.on("mouse:down", deleteCircleHandler);
</script>

In this updated code, we have replaced the fabric.Polygon objects with fabric.Circle objects. The circle1 and circle2 variables define the properties of each circle, such as the radius, position, fill color, stroke color, and scaling.

Additionally, we have added the deleteCircleHandler function, which is similar to the previously mentioned deleteHandler function. It removes the selected circle object from the canvas when a mouse:down event occurs. We then bind the deleteCircleHandler function to the canvas's mouse:down event using the canvas.on("mouse:down", deleteCircleHandler) line.

Now, you can click on any circle on the canvas, and it will be deleted, thanks to the deleteCircleHandler function.

Conclusion:

In this blog, we have explored the process of programmatically deleting selected objects in Fabric.js 5. By mastering the remove method and its application to polygons and circles, you can enhance your canvas-based applications with an efficient and intuitive delete functionality. Armed with the knowledge gained from this tutorial, you can confidently implement powerful object deletion capabilities in your own projects, taking your Fabric.js 5 skills to the next level.‍

Related Blogs

25 Articles