Assign object identifier to some objects in fabric.js and save it as json

Question

I am using fabric.js to interact with canvas. I need to assign some objects unique id and then access those objects with the ids.

I got the following code from How to select Fabric.js object programmatically and added in fabric.js

  var object = {
     id:   this.id,
  }

Now, I am adding the ids of some objects dynamically using the following codes:

for (i=0;i<10;i++)
{
  var rect = new fabric.Rect({
       left: 100,
       top: 100,
       fill: 'red',
        id: 'RECT'+i
       });
    alert(rect.id) //this is showing me the ids of each rectangle.
}

But the situation is I need to save these ids in json, so that once when I load the json I can access the objects through program by their ids. I tried following code:

  var json = JSON.stringify( canvas.toDataLessJSON(['id']) );

With this I am not getting the ids in the JSON. Please suggest me a way by which I can save ids of few objects into JSON.

I added a working JSFiddle for your reference. Hope it helps! — Tim Harker, Feb 17 '17 at 15:32
@TimHarker . Thanks a lot. I am now able to get the ids in json. But is it possible to access those ids with JavaScript?? I am trying but not able to do so. — uddipana, Feb 20 '17 at 05:25
Sure, I updated the fiddle with a Step 4, [http://jsfiddle.net/rekrah/dw3bakkp/](http://jsfiddle.net/rekrah/dw3bakkp/). I assume when you say "... is it possible to access those ids with JavaScript." you're referring to without having to use `canvas.loadFromJSON`. Anyway, take a look at the update JSFiddle and let me know. — Tim Harker, Feb 20 '17 at 15:07

Tim Harker · Accepted Answer · 2017-02-17T15:07:23.870

Here's a working JSFiddle: http://jsfiddle.net/rekrah/dw3bakkp/

Try this: var json = JSON.stringify(canvas.toJSON(['id']));

And to load the canvas from JSON and access the objects by their ids:

var rectOne, rectTwo;  
canvas.loadFromJSON(json, function () {}, 
  function (o, object) {
    switch (object.id) {
        case 'RECT1':
            rectOne = object;
            break;            
        case 'RECT2':
            rectTwo = object;
            break;
        default:
            break;
    }
});

And here's a website I'm putting together that uses the code:

http://xpressclocks.azurewebsites.net/customize/abstract/liquid/white-paint-splash-on-black-background

Assign object identifier to some objects in fabric.js and save it as json

1 Answers1