toJSON examples

Used in documentation (jsdoc tag)

by hkundnani

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="500" height="500"></canvas>

<button onclick="saveNow()">Save </button>
<button onclick="loadNow()">Load </button>

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

var canvas = this.__canvas = new fabric.Canvas('c', { selection: false });
  fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

saveNow = (function(){
    var jsonSave = JSON.stringify(canvas.toJSON('line1', 'line2', 'line3', 'line4'));
   // alert(jsonSave);
    sessionStorage.canvase = jsonSave;     
});

loadNow = (function(){
    var jsonLoad = sessionStorage.canvase;
   // alert(jsonLoad);
    canvas.loadFromJSON(jsonLoad, canvas.renderAll.bind(canvas));
});

(function() {
	
		var line =  new fabric.Line([ 250, 125, 250, 175 ], {
      fill: 'red',
      stroke: 'red',
      strokeWidth: 5,
      lockScalingX: true,
      lockScalingY: true,
      lockRotation: true,
      hasBorders: false,
      hasControls: false,
      perPixelTargetFind: true,
    });
    
    var circle1 = new fabric.Circle({
      left: 250,
      top: 125,
      lockScalingX: true,
      lockScalingY: true,
      lockRotation: true,
      hasBorders: false,
      hasControls: false,
      radius: 3,
      strokeWidth: 3,
      stroke: 'red',
      fill: 'red'
    });
    
    var circle2 = new fabric.Circle({
      left: 250,
      top: 175,
      lockScalingX: true,
      lockScalingY: true,
      lockRotation: true,
      hasBorders: false,
      hasControls: false,
      radius: 3,
      strokeWidth: 3,
      stroke: 'red',
      fill: 'red'
    });
    
    circle1.line = circle2.line = line;
		line.circle1 = circle1;
    line.circle2 = circle2;
    
    canvas.add(line);

    canvas.add(circle1);
    canvas.add(circle2);

    circle1.bringToFront();
    circle2.bringToFront();

    canvas.setActiveObject(line);
    canvas.renderAll();
})();

canvas.on('object:moving', function(e) {
    var p = e.target;
    // move line
    if (p.circle1) {
        var oldCenterX = (p.x1 + p.x2) / 2;
        var oldCenterY = (p.y1 + p.y2) / 2;

        var deltaX = p.left - oldCenterX;
        var deltaY = p.top - oldCenterY;

        p.circle1 && p.circle1.set({
    ...