i'm using fabric.js to add image object to canvas. Serialization works fine, but after deserialization canvas object is empty. console.log(JSON.stringify(canvas)) returns: {"objects":[],"background":""}

here is my code:

var canvas = new fabric.Canvas('goCanvas');

fabric.Image.fromURL("rooryteam03da088a.jpeg", function(oImg) {
        canvas.add(oImg);
});

var serialized = JSON.stringify(canvas);

canvas.clear();

canvas.loadFromDatalessJSON(serialized);

console.log(JSON.stringify(canvas));

I also tried loadFromJSON instead of loadFromDatalessJSON for deserialization, but with no result. So, What i'm doing wrong?

i'm using fabric.js to add image object to canvas. Serialization works fine, but after deserialization canvas object is empty. console.log(JSON.stringify(canvas)) returns: {"objects":[],"background":""}

here is my code:

var canvas = new fabric.Canvas('goCanvas');

fabric.Image.fromURL("rooryteam03da088a.jpeg", function(oImg) {
        canvas.add(oImg);
});

var serialized = JSON.stringify(canvas);

canvas.clear();

canvas.loadFromDatalessJSON(serialized);

console.log(JSON.stringify(canvas));

I also tried loadFromJSON instead of loadFromDatalessJSON for deserialization, but with no result. So, What i'm doing wrong?

• javascript
• fabricjs

2 Answers 2

fabric.Image.fromURL is async. You stringify the canvas before receiving the image, you should move that code to the image loading callback:

var canvas = new fabric.Canvas('goCanvas');

fabric.Image.fromURL("rooryteam03da088a.jpeg", function(oImg) {
  canvas.add(oImg);

  var serialized = JSON.stringify(canvas);
  canvas.clear();
  canvas.loadFromDatalessJSON(serialized);
  console.log(JSON.stringify(canvas));
});

The variable serialized bees a reference to the object canvas. When you call canvas.clear() you empty the canvas, and thus your variable serialized, which references canvas, bees empty as well.

I'm not following what you are attempting to achieve since you are clearing the canvas only to add the same content back to it, so not sure how to offer an alternate option.