fabric.js backgroundImage toDataURL

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 crossorigin="anonymous" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/145/cache/dalailama-ngk0509_14515_600x450.jpg" id="bg">
        <img src="" id="bg1">

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() {
   document.getElementById('bg1').src=canvas.toDataURL({format: 'image/jpg', quality: 1.0, multiplier: 0.1});
    // console.log(canvas.toDataURL({multiplier: 3}));
    //window.open(canvas.toDataURL({multiplier: 3}));
});