Image does not load when using canvas.loadFromJSON in Fabric.js 1.3.0

Question

I'm using the latest version:

http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.3.0/fabric.min.js

The test code below simulates a canvas you will save after 1 second. Then load it from JSON. This works on older versions, then on 1.3.0 it stopped working. You would have to keep putting some timeout like:

setTimeout( function(){canvas.renderAll()},500);

to make it work at times but not all the time.

var img= "https://www.google.com/images/srpr/logo3w.png";          
fabric.Image.fromURL(img, function(img) {
        img.set({
        left: 200,
        top: 200   
    });   
    canvas.add(img); 
    canvas.renderAll();
}); 
 setTimeout( function(){
    var json=JSON.stringify(canvas);
    canvas.clear();         
    canvas.loadFromJSON(json);
    canvas.renderAll(); 
    //setTimeout( function(){canvas.renderAll()},500) // adding a timeout seems to be the only fix.
 },1000)

how do I make it render without adding some timeouts like before ?

John · Accepted Answer · 2013-11-08 06:56:23Z

10

just use

canvas.loadFromJSON(json,canvas.renderAll.bind(canvas));

edited Nov 8, 2013 at 6:56

answered Nov 8, 2013 at 3:04

John

2,0432 gold badges20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2636123 Over a year ago

Hi I tried it here upmcwest.com/rinkupdates/boardjs/f1.htm ( click view source ) and the result is the same.

Kienz Over a year ago

Just updated the above answer - use loadFromJSON instead of loadFronJson.

user2636123 Over a year ago

Yep that did it! I think on this version if the JSON has an image, it takes some time to render all and you will get a flicker.

Caslav Sabani Over a year ago

This works for me on fabric 1.5.0. But tell me please do you know what is the purpose of second argument and why do you need to bind to canvas it self, why is it not enough just to call renderAll(). This is very strange behaviour. Thanks for the answer.

Collectives™ on Stack Overflow

Image does not load when using canvas.loadFromJSON in Fabric.js 1.3.0

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related