fabric 2.4 to JSON test

by uemon

HTML

<script src="https://rawgit.com/fabricjs/fabric.js/master/dist/fabric.min.js"></script>
<canvas id="c1"></canvas>
<button id="toJSON">to JSON</button> -> <button id="loadJSON">load from JSON</button>
<canvas id="c2"></canvas>

CSS

canvas {
  border: 1px solid #999;
}

JavaScript

(function() {
 
 var canvas = new fabric.Canvas('c1',{
  	width:500,
    height:300, 
    backgroundColor: "#ffffff",
  });
  var canvas2 = new fabric.Canvas('c2',{
  	width:500,
    height:300,
    backgroundColor: "#f9fc82"
  });

// ADD YOUR CODE HERE
	var savedata;
	var clipPath = new fabric.Rect({ 
  		width: 100, height:100, top: 100, left: 150, fill: '#aaaaaa', 
      absolutePositioned: true });
  canvas.add(clipPath);

  fabric.Image.fromURL('http://fabricjs.com/assets/dragon2.jpg', function(img) {
  	var imgInstance = img.set({
    	clipPath:clipPath,
      scaleX: 0.2,
      scaleY:0.2
    })
    canvas.add(imgInstance);
  });
  
  $("#toJSON").on('click', function(){
    savedata = JSON.stringify(canvas.toDatalessJSON());
    console.log(savedata);
  });
  
  $("#loadJSON").on('click', function(){
  	//canvas2.loadFromDatalessJSON(savedata);
    
    canvas2.loadFromDatalessJSON(
  
{"version":"2.4.0",
"objects":[    {"type":"rect","version":"2.4.0","originX":"left","originY":"top","left":150,"top":100,"width":100,"height":100,"fill":"#aaaaaa","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0},   ...