Missing Image

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js"></script>
<button id="load-canvas">Load Canvas</button>
<canvas id="my-canvas"></canvas>

JavaScript

var canvas = new fabric.Canvas();
var el = document.getElementById('my-canvas');
var button = document.getElementById('load-canvas');

json = {"objects":[{"type":"rect","originX":"center","originY":"center","left":100,"top":300,"width":300,"height":300,"fill":"rgba(255,255,255, 1)","stroke":"rgba(17,17,17,1)","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,"rx":0,"ry":0},{"alignX":"none","alignY":"none","angle":0,"backgroundColor":"","crossOrigin":"Anonymous","fill":"rgb(0,0,0)","fillRule":"nonzero","filters":[{"brightness":0,"type":"Brightness"}], "flipX":false,"flipY":false,"globalCompositeOperation":"source-over","height":413,"itemTitle":"Image layer","left":540,"meetOrSlice":"meet","objType":"item","opacity":1,"originX":"center","originY":"center","scaleX":1,"scaleY":1,"skewX":0,"skewY":0,"src":"https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg","strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"strokeWidth":0,"timestamp":1482499319,"top":540,"type":"image","uuid":"e4bc4d00-af88-4c4a-8d28-c0bea7da2d57","visible":true,"width":335}],"background":"#FFFFFF"}


var loadCanvas = function() {
	canvas.dispose();

	canvas.initialize(el, {
		width: 600,
		height: 600
	});
	canvas.loadFromJSON( JSON.stringify(json), canvas.renderAll.bind(canvas) );
};

button.addEventListener( 'click', loadCanvas );