How to remove fabric.js object with custom id?

Question

I have created a fabric.js canvas editor with some images and texts. but I want to track added images or texts. That's why I provide myId when added this object. But how to remove the object with this custom id?

Here is my code for adding a text

var text = new fabric.Text(txt, { left: 30, top: 0, fill: "#"+col , fontFamily: family, id:MyID });
canvas.setActiveObject(text);
canvas.add(text);  

Here myID is my custom id

But how to remove this text by using this myID ? I have tried

canvas.remove(get_myID); //where get_myID is provided id by code

but it does not work. Please help.

Answer 1

I've extended the Fabric library for doing a similar function.

First, create a file, fabricExtensions.js and include it just after you have loaded the fabric library in the head section of your page.

  <!-- Load FabricJS Library -->
  <script type="text/javascript" src="fabric.min.js"></script>
  <!-- Load FabricJS Extension file -->
  <!-- ** Load this file in the HEAD AFTER loading FabricJS** -->
  <script type="text/javascript" src="fabricExtensions.js"></script>

Inside the newly created fabricExtensions.js file add the following code:

fabric.Canvas.prototype.getItemByAttr = function(attr, name) {
    var object = null,
    objects = this.getObjects();
    for (var i = 0, len = this.size(); i < len; i++) {
        if (objects[i][attr] && objects[i][attr] === name) {
            object = objects[i];
            break;
        }
    }
    return object;
};

What this block of code does, is it allows you to select an object by any attribute assigned to it.

Now, to remove the object, this should work:

canvas.fabric.getItemByAttr('id', myID).remove();

---

That method will allow you to target ANY attribute set to an object. Alternatively, you could change it to something like this to target only the exact attribute you were looking for:

fabric.Canvas.prototype.getItemByMyID = function(myID) {
    var object = null,
        objects = this.getObjects();
    for (var i = 0, len = this.size(); i < len; i++) {
        if (objects[i].id&& objects[i].id=== myID) {
            object = objects[i];
            break;
        }
    }
    return object;
};

And to remove the object:

canvas.fabric.getItemByMyID(myID).remove();

Answer 2

Here's how I achieve the same functionality. I have two methods, getObjectFromCanvasById and removeObjectFromCanvas. getObjectFromCanvasById takes an id (the id you set (MyID) when creating a canvas object)

getObjectFromCanvasById(id) {
    const canvasObject = window.canvas.getObjects().filter((item) => {
        return item.id === parseInt(id)
    })
    return canvasObject[0]
}

I call this function from my removeObjectFromCanvas method

removeObjectFromCanvas(objectId) {
    const canvasObject = this.getObjectFromCanvasById(objectId)
    window.canvas.remove(canvasObject)
}

Answer 3

It's very easy to remove an object with a custom attribute. Use .find() to find the object that matches your custom attribute value. In my case, I had an attribute called "layerId". Then call canvas.remove(obj), and it should remove your object.

let obj = canvas.getObjects().find(obj => obj.layerId === customId);
canvas.remove(obj);