loadFromJSON examples

Used in documentation (jsdoc tag)

by Steve Eberhardt

HTML

<script src="https://surveyswithgames.com/app/assets/Spapp/assets/js/fontfaceobserver.js"></script>
<script src="https://surveyswithgames.com/app/assets/Spapp/assets/js/fabric.min.js"></script>

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap" rel="stylesheet"> 

<canvas id="c2" width="600" height="600"></canvas>

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

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

var json = '{"objects":[{"type":"rect","originX":"center","originY":"center","left":300,"top":150,"width":150,"height":150,"fill":"#29477F","overlayFill":null,"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":{"color":"rgba(94, 128, 191, 0.5)","blur":5,"offsetX":10,"offsetY":10},"visible":true,"clipTo":null,"rx":0,"ry":0,"x":0,"y":0},{"type":"circle","originX":"center","originY":"center","left":300,"top":400,"width":200,"height":200,"fill":"rgb(166,111,213)","overlayFill":null,"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":{"color":"#5b238A","blur":20,"offsetX":-20,"offsetY":-10},"visible":true,"clipTo":null,"radius":100}],"background":""}'

canvas1.loadFromJSON(json);



var canvas2 = window._canvas = new fabric.Canvas('c2');

var jdata = '{"version":"4.0.0-rc.1","objects":[{"type":"textbox","version":"4.0.0-rc.1","originX":"left","originY":"top","left":-0.98,"top":273,"width":592,"height":97.63,"fill":"#fcfcfc","stroke":"#000000","strokeWidth":0,"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,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"text":"Rate our Hot Medium and Mild Salsa","fontSize":40,"fontWeight":"100","fontFamily":"Open...