fabric.js loadFromJSON

by Arvind Pal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.2/fabric.min.js"></script>
<canvas id="canvas" width="500" height="500" class="canvas"></canvas>
<button id="load">loadFromJSON</button>
<button id="reset">reset</button>

CSS

canvas {
    border: 1px solid gray
}

JavaScript

var canvas = window._canvas = new fabric.Canvas('canvas');
canvas.setBackgroundColor('red', canvas.renderAll.bind(canvas));
var json = `{"version":"3.6.3","objects":[{"type":"text","version":"3.6.3","originX":"left","originY":"top","left":100,"top":100,"width":250,"height":40.68,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"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,"text":"Add Heading","fontSize":36,"fontWeight":"normal","fontFamily":"Montserrat","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"minWidth":20,"splitByGrapheme":false,"styles":{}},{"type":"text","version":"3.6.3","originX":"left","originY":"top","left":417,"top":79,"width":200,"height":20.34,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"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,"text":"Add text","fontSize":18,"fontWeight":"normal","fontFamily":"Montserrat","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"minWidth":20,"splitByGrapheme":false,"styles":{}}],"background":"#ffffff"}`;

document.getElementById('load').addEventListener('click', function () {
    canvas.loadFromJSON(json,...