toJSON examples

Used in documentation (jsdoc tag)

HTML

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

<button id="save">Save </button>
<button id="load">Load </button>

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

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


(function() {

  saveNow = (function(){
    var jsonSave = JSON.stringify(canvas.toJSON(['linesID', 'selection', 'id']));
    sessionStorage.canvase = jsonSave;
  });

  function _callBack() {
    var objs = canvas.getObjects();
    var lines = {};
    for(var i = 0; i < objs.length; i++) {
       if (objs[i].type === 'line') {
           lines[objs[i].id] = objs[i];
       }
    }
    for(i = 0; i < objs.length; i++) {
       if (objs[i].type === 'circle') {
           var circle = objs[i];
           if (circle.linesID) {
               circle.custom.line1 = lines[circle.linesID[0]]; 
               circle.custom.line2 = lines[circle.linesID[1]];
               circle.custom.line3 = lines[circle.linesID[2]];
               circle.custom.line4 = lines[circle.linesID[3]];
           }
       }
    }
    canvas.renderAll();
  }

  loadNow = (function(){
    var jsonLoad = sessionStorage.canvase;
    canvas.loadFromJSON(jsonLoad, _callBack);
  });

document.getElementById('save').addEventListener('click', saveNow);
document.getElementById('load').addEventListener('click', loadNow);
  function makeCircle(left, top, line1, line2, line3, line4) {
    var c = new fabric.Circle({
      left: left,
      top: top,
      strokeWidth: 5,
      radius: 12,
      fill: '#fff',
      stroke: '#666'
    });
    c.hasControls = c.hasBorders = false;
		
    c.custom = {};
    
    c.custom.line1 = line1;
    c.custom.line2 = line2;
    c.custom.line3 = line3;
    c.custom.line4 = line4;
    c.linesID = [line1 && line1.id, line2 && line2.id, line3 && line3.id, line4 && line4.id];
    return c;
  }

  function makeLine(coords, id) {
    return new fabric.Line(coords, {
      fill: 'red',
      stroke: 'red',
      strokeWidth: 5,
      id: id
    });
  }

  var line = makeLine([ 250, 125, 250, 175 ],...