Fabric js Load canvas from JSON

Question

I am trying to implement save and load functions, but I get an error when I'm trying to load the json into the canvas. The error message says "Cannot read property 'async' of undefined", but the json output looks good I think. (I'm not used to JavaScript, so I have no idea, if the problem is in fabric or in my code..)

Here is a jsFiddle Link to my test case: Example fiddle

The save and load function is like this so far:

var json = JSON.stringify(canvas);
canvas.clear();
canvas.loadFromJSON(json, function() {
    canvas.renderAll();
});       

Thanks for your help! :)

Answer 1

You have probably serialized your objects with one (or more) of them having a custom property or you created and serialized a new custom class altogether. Have a look here to get a better idea about the rules of Canvas serialization: http://fabricjs.com/docs/fabric.Canvas.html#toJSON;

Try running your code with the reviver function (http://fabricjs.com/docs/fabric.Canvas.html#loadFromJSON).

canvas.loadFromJSON(json, function() {
   canvas.renderAll(); 
},function(o,object){
   console.log(o,object)
})

It should give you a clue at what point of load it is failing. Inspect your serialized canvas against the way the loadFromJson function runs and you will find your culprit.

Please refer to this answer as well and read the comment: https://stackoverflow.com/a/37545296/2779183