fabric.js backgroundImage toDataURL

by swesh

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.2.0/fabric.all.min.js"></script>
<canvas id="c" width="300" height="300" class="c"></canvas>
<div>
<button id="data-url">toDataURL</button>
  <img...

CSS

.canvas-container {
    border: 1px solid #999;
}
img {
    display: none;
}

JavaScript

// Do some initializing stuff
fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: 'rgba(102,153,255,0.5)',
    cornerSize: 12,
    padding: 5
});
var backgroundImage='http://images.nationalgeographic.com/wpf/media-live/photos/000/145/cache/dalailama-ngk0509_14515_600x450.jpg';
var canvas = window._canvas = new fabric.Canvas('c');
canvas.setBackgroundImage(backgroundImage, canvas.renderAll.bind(canvas));


canvas.add(new fabric.Rect({left: 200, top: 200, width: 50, height: 50, fill: '#ffc400'}));

canvas.setBackgroundImage(document.getElementById('bg').src, canvas.renderAll.bind(canvas), {backgroundImageStretch: false});

fabric.util.addListener(document.getElementById('data-url'), 'click', function() {
    window.open(canvas.toDataURL({multiplier: 3}));
});