Reset canvas and reload using JSON in Fabric.js

Question

I am building something like an example of a kitchen, except that I need to have several views.

http://fabricjs.com/kitchensink

Business card: front and back

As I edit, I save JSON periodically.

If you want to edit back without reloading the page (because I use AngularJS), how can I erase the current canvas and reload the new JSON?

I am currently loading JSON, you are changing the look of the change, running canvas.clearContext() and reloading the new JSON. This does not work as I expected.

Update

I use the directive to manage this canvas. I created an instance of the directive when JSON was available, and when I tried to update it, for some reason it would not work.

I deleted this and made the directive empty, and now I just load Json through the service. Hooray!

Answer 1

Normally canvas.loadFromJSON() clears the entire canvas before loading new objects. Otherwise, you can run canvas.clear(); .

http://fabricjs.com/docs/fabric.Canvas.html#clear

How do you download JSON?

Something like this should work:

 var json = canvas.toJSON(); canvas.clear(); canvas.loadFromJSON(json, canvas.renderAll.bind(canvas)); 

After loading JSON, it is important to call canvas.renderAll() . In the second parameter of canvas.loadFromJSON(json, callback) you can define the cllback function, which is called after all objects are loaded / added.

http://fabricjs.com/docs/fabric.Canvas.html#loadFromJSON

Answer 2

I had a similar problem when working with React, using canvas.clear() was not enough - the objects were theoretically deleted, but there was still something on the scene that interfered with the new loaded objects, it is possible that the events associated with these deleted objects ... Anyway, now I use canvas.dispose() to clear this canvas when the scene reloads, and the problems disappeared.

You can check the documents .