Loading Styles Issue

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.2.4/fabric.min.js"></script>
<canvas id="c" width="600" height="300"></canvas>

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

var canvas = new fabric.Canvas('c');
canvas.backgroundColor = 'black';

var obj = '{"type":"i-text","version":"4.4.0","originX":"left","originY":"top","left":16.81,"top":72.37,"width":307.42,"height":36.16,"fill":"rgba(255, 255, 255, 1)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":10,"scaleX":2.48,"scaleY":2.48,"angle":0,"flipX":false,"flipY":false,"opacity":1,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"text":"Valentines Day","fontSize":32,"fontWeight":400,"fontFamily":"Bungee Inline","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"styles":[{"9":{}}]}';

var obj = JSON.parse(obj);
fabric.util.enlivenObjects([obj], function(objects) {
  var obj = objects[0];
  canvas.add(objects[0]);
});