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.

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.

• javascript
• fabricjs

6 Answers 6

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();

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);

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)
}

Step 1 :

// to get object properties

console.log(canvas.getObjects());

step 2:

canvas.item(1).visible = true;

//by the reference of index number item(index number here).visible = true or false

step 3:

canvas.renderAll();

You should call it like canvas.remove(text). Or you can use text.remove() or canvas.getActiveObject().remove().

this answer is a rework of https://stackoverflow.com/a/32953690/1815624

I wanted to remove the item by id...I think things have changed a little since the original answer was given you now remove items like this canvas.remove( object);

here's the code

fabric.Canvas.prototype.RemoveByMyID = 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;
        }
    }
    canvas.remove( object);
};

and how to use it

canvas.RemoveByMyID(myID);