Canvas Group toJson

by Eugene Vilder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.js"></script>
<canvas id="paper" width="400" height="200" style="border:1px solid #ccc"></canvas>
<button id="save">Save to JSON</button>
<button id="restore">Restore form JSON</button>

SCSS

#paper {
  border: solid 1px red;
}

JavaScript

fabric.ContainerRect = fabric.util.createClass(fabric.Group, {
		type: 'container-rect',
    initialize: function(optionsR, optionsB) {
      optionsR || (optionsR = {});
      optionsB || (optionsB = {});
                
	    const red = new fabric.Rect(optionsR);
			const blue = new fabric.Rect(optionsB );

      this.callSuper('initialize', [red, blue], {});
       console.log('____INIT', optionsR, optionsB);
    },
  	_render: function(ctx) {
    	this.callSuper('_render', ctx);
    }
});

/* fabric.ContainerRect.fromObject = function (object, callback) {
    var _enlivenedObjects;
    fabric.util.enlivenObjects(object.objects, function (enlivenedObjects) {
        delete object.objects;
        _enlivenedObjects = enlivenedObjects;
    });
    return new fabric.ContainerRect(_enlivenedObjects, object);
}; */

fabric.ContainerRect.fromObject = function (object, callback) {
var _enlivenedObjects;
    fabric.util.enlivenObjects(object.objects, function (enlivenedObjects) {
        delete object.objects;
       
         _enlivenedObjects = enlivenedObjects;
         
         
        callback && callback(new fabric.ContainerRect(_enlivenedObjects, object));
    });
};

//fabric.ContainerRect.async = true;

//==========================================================================================
let store;
const canvas = new fabric.Canvas('paper');


        
const redBox = new fabric.ContainerRect({
    left: 0,
    top: 0,
    width: 50,
    height: 50,
    fill: 'red'
}, {
    left: 100,
    top: 100,
    width: 50,
    height: 50,
    fill: 'blue'
});

canvas.add(redBox);
canvas.renderAll();

  
$("#save").on('click', function(){
	store = canvas.toJSON();
  console.log(store);
});
    
$("#restore").on('click', function(){
	canvas.loadFromJSON(store, function(){
//  		       console.log('restored:', canvas.getObjects());
  //  	canvas.renderAll();
	});
});