loadFromJSON examples

Used in documentation (jsdoc tag)

by Lindow

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="332.598425" height="219.212598"></canvas>
<br><br>
<button id="tojson">To JSON</button>
<p id="json"></p>

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

// Do some initializing stuff
fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: 'rgba(102,153,255,0.5)',
    cornerSize: 12,
    padding: 5
});

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

var json = '{"objects":[{"type":"i-text","originX":"left","originY":"top","left":41,"top":60.13,"width":56.4,"height":15.82,"fill":"rgba(255, 255, 255, 1)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"John Doe","fontSize":"14","fontWeight":"bold","fontFamily":"PT_Sans","fontStyle":"","lineHeight":1,"underline":false,"overline":false,"linethrough":false,"textAlign":"center","textBackgroundColor":"","charSpacing":0,"styles":{}},{"type":"i-text","originX":"left","originY":"top","left":129.91,"top":63.18,"width":113.13,"height":15.82,"fill":"rgba(255, 255, 255, 1)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"Designer Graphique","fontSize":14,"fontWeight":"normal","fontFamily":"PT_Sans","fontStyle":"","lineHeight":1,"underline":false,"overline":false,"linethrough":false,"textAlign":"center","textBackgroundColor":"","charSpacing":0,"styles":{}},{"type":"i-text","originX":"right","originY":"top","left":282.12,"top":36.17,"width":92,"height":18.08,"fill":"rgba(255, 255, 255,...