Setting a background image in fabric.js throws an exception when clicked

Question

I am trying to set change the backround image for a canvas using fabric.js but running into some instability. The call to add the background works with no trouble but if I then click anywhere on the canvas it goes blank and seems to move to selection mode - although this just seems to be due to an untrapped exception.

I cannot figure out what is causing the behavior. It works fine on this page http://fabricjs.com/customization/ but the following jsfiddle is failing http://jsfiddle.net/YH9yD/20/

var canvas = window._canvas = new fabric.Canvas('c');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.setBackgroundImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
    backgroundImageOpacity: 0.5,
    backgroundImageStretch: false
});
this.__canvases.push(canvas);

Answer 1

try loading the image before you add to the canvas. if you add an image that hasnt been loaded you will get an exception. This works for us:

var img = new Image();
img.onload = function(){
   canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas), {
            originX: 'left',
            originY: 'top',
            left: 0,
            top: 0
        });
};
img.src = "your image source"

regards, Benick

Answer 2

Try this

canvas.setBackgroundImage('add image source', canvas.renderAll.bind(canvas), {
        scaleY: canvas.height ,
        scaleX: canvas.width 
    });

    canvas.renderAll();