load from options after the load backroung in the callback

src/mixins/canvas_serialization.mixin.js

@@ -52,21 +52,23 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
 
     var _this = this;
     this._enlivenObjects(serialized.objects, function () {
-      _this._setBgOverlay(serialized, callback);
+      _this._setBgOverlay(serialized, function () {
+        // remove parts i cannot set as options
+        delete serialized.objects;
+        delete serialized.backgroundImage;
+        delete serialized.overlayImage;
+        delete serialized.background;
+        delete serialized.overlay;
+        // this._initOptions does too many things to just
+        // call it. Normally loading an Object from JSON
+        // create the Object instance. Here the Canvas is
+        // already an instance and we are just loading things over it
+        for (var prop in serialized) {
+          _this[prop] = serialized[prop];
+        }
+        callback && callback();
+      });
     }, reviver);
-    // remove parts i cannot set as options
-    delete serialized.objects;
-    delete serialized.backgroundImage;
-    delete serialized.overlayImage;
-    delete serialized.background;
-    delete serialized.overlay;
-    // this._initOptions does too many things to just
-    // call it. Normally loading an Object from JSON
-    // create the Object instance. Here the Canvas is
-    // already an instance and we are just loading things over it
-    for (var prop in serialized) {
-      this[prop] = serialized[prop];
-    }
     return this;
   },
 

test/unit/canvas_static.js

@@ -156,7 +156,10 @@
     teardown: function() {
       canvas.clear();
       canvas.backgroundColor = fabric.StaticCanvas.prototype.backgroundColor;
+      canvas.backgroundImage = fabric.StaticCanvas.prototype.backgroundImage;
       canvas.overlayColor = fabric.StaticCanvas.prototype.overlayColor;
+      canvas.controlsAboveOverlay = fabric.StaticCanvas.prototype.controlsAboveOverlay;
+      canvas.preserveObjectStacking = fabric.StaticCanvas.prototype.preserveObjectStacking;
       canvas.calcOffset();
     }
   });
@@ -852,19 +855,54 @@
     });
   });
 
-  test('loadFromJSON with custom properties on Canvas', function() {
+  test('loadFromJSON with custom properties on Canvas with no async object', function() {
     var serialized = JSON.parse(PATH_JSON);
     serialized.controlsAboveOverlay = true;
     serialized.preserveObjectStacking = true;
+    equal(canvas.controlsAboveOverlay, fabric.Canvas.prototype.controlsAboveOverlay);
+    equal(canvas.preserveObjectStacking, fabric.Canvas.prototype.preserveObjectStacking);
     canvas.loadFromJSON(serialized, function() {
       ok(!canvas.isEmpty(), 'canvas is not empty');
-      equal(fabric.Canvas.prototype.controlsAboveOverlay, false);
-      equal(fabric.Canvas.prototype.preserveObjectStacking, false);
+      equal(canvas.controlsAboveOverlay, true);
+      equal(canvas.preserveObjectStacking, true);
     });
+    // if no async object the callback is called syncronously
     equal(canvas.controlsAboveOverlay, true);
     equal(canvas.preserveObjectStacking, true);
   });
 
+  asyncTest('loadFromJSON with custom properties on Canvas with image', function() {
+    var JSON_STRING = '{"objects":[{"type":"image","originX":"left","originY":"top","left":13.6,"top":-1.4,"width":3000,"height":3351,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.05,"scaleY":0.05,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"src":"' + IMG_SRC + '","filters":[],"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet"}],'
++ '"background":"green"}';
+    var serialized = JSON.parse(JSON_STRING);
+    serialized.controlsAboveOverlay = true;
+    serialized.preserveObjectStacking = true;
+    equal(canvas.controlsAboveOverlay, fabric.Canvas.prototype.controlsAboveOverlay);
+    equal(canvas.preserveObjectStacking, fabric.Canvas.prototype.preserveObjectStacking);
+    canvas.loadFromJSON(serialized, function() {
+      ok(!canvas.isEmpty(), 'canvas is not empty');
+      equal(canvas.controlsAboveOverlay, true);
+      equal(canvas.preserveObjectStacking, true);
+      start();
+    });
+    // before callback the properties are still false.
+    equal(canvas.controlsAboveOverlay, false);
+    equal(canvas.preserveObjectStacking, false);
+  });
+
+
+  asyncTest('loadFromJSON with image background and color', function() {
+    var serialized = JSON.parse(PATH_JSON);
+    serialized.background = 'green';
+    serialized.backgroundImage = JSON.parse('{"type":"image","originX":"left","originY":"top","left":13.6,"top":-1.4,"width":3000,"height":3351,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.05,"scaleY":0.05,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"src":"' + IMG_SRC + '","filters":[],"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet"}');
+    canvas.loadFromJSON(serialized, function() {
+      ok(!canvas.isEmpty(), 'canvas is not empty');
+      equal(canvas.backgroundColor, 'green');
+      ok(canvas.backgroundImage instanceof fabric.Image);
+      start();
+    });
+  });
+
   test('loadFromJSON custom properties', function() {
     var rect = new fabric.Rect({ width: 10, height: 20 });
     rect.padding = 123;