Fabric.js: loadFromJSON removed already added object in canvas

[robinflyhigh]

When you add few objects into canvas and then try and reload a JSON data then all previously added objects are removed. Below are the steps to reproduce it:

1.) Go to http://fabricjs.com/kitchensink/
2.) Add any 2 object or element
3.) Go to Execute Tab and clear all the content from it.
4.) Copy past the code from http://sharetext.org/VSOM
5.) This would add the first two element added to the canvas and replace it with the Thumbs Up object with text as '333 33'

When even a JSON data is loaded into canvas it tries to add it from index 0 which overwrites the existing object on the canvas

:)

[kangax]

That's expected behavior :) loadFromJSON replaces entire canvas, not adds to it.

[robinflyhigh]

OK and your reply was super quick.

But think this as a case where loadFromJSON is used after an element is added to canvas.

Your thoughts !!

[kangax]

You'll need other ways of adding objects onto canvas. Think of loadFromJSON as "load" in any desktop application, like Photoshop or Word. "Load" loads document entirely, replacing everything else.

[Kienz]

@robinflyhigh You can use fromObject() method to load (add) objects from json without clear entire canvas.
Look here: http://jsfiddle.net/Kienz/sFGGV/6/

[robinflyhigh]

Thanks @Kienz, it worked. Glad you replied soon because I was attempting to merge two JSON data (dont ask me how, some time i think crazy)

You Rock !!

[Jochuaf]

Hi @Kienz,
Your solution works great!
Is there any way to change the scaleX/scaleY properties of eack object before adding to canvas?
objects[i].top = objects[i].top * 2; => reset ok
objects[i].top = objects[i].top * 2; => reset ok
objects[i].scaleX = objects[i].scaleX * 2; => doesn't work
objects[i].scaleY = objects[i].scaleY * 2; => doesn't work
Cheers!

[Kienz]

@Jochuaf It should work - FWIW: It's better to use getter and setter methods (obj.setScaleX(obj.getScaleX() * 2).
I've updated the jsfiddle: http://jsfiddle.net/sFGGV/8/

[Jochuaf]

@Kienz,
Thanks a ton, it works like a charm. Great job!
I didn't put the code at the right place.
Cheers

[MULLAINATHAN]

Hi robinflyhigh,

How could you merge two JSON data ? I'm struggling on this. Please help me.

[robinflyhigh]

@MULLAINATHAN Why don't you load both the JSON separately two times?