get backgroundImage object

Question

i am currently trying to get the backgroundImage object of my canvas instance and it does not work. i get what ever properties of the canvas object but not of my current loaded backgroundImage. anyone else figured out that issue? here is what i have

var bgImg = canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas), {
  width: bgWidth,
  height: bgHeight,
  originX: 'left',
  originY: 'top',
  left: 0,
  top: bgTop
});

if i then do something like: console.log(bgImg.backgroundImage) i get null as result. for all other properties of the canvas element i get either the object return or the value if i want the width for example - so all other properties do work. what is the reason that the backgroundImage is not working?

any help is very much appreciated.

many thanks, michael

Answer 1

It's because setBackgroundImage is not finished (asynchronous) when you try to display with the console.log();

html:

<canvas width="320" height="510" id="canvas"></canvas>
<button id="click">Click here !</button>

Javascript:

var canvas = new fabric.Canvas('canvas');

var img = new Image()
img.src = 'http://fabricjs.com/assets/jail_cell_bars.png';

var bgImg = canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas), {
    width: 320,
    height: 510,
    originX: 'left',
    originY: 'top',
    left: 0,
    top: 0
});

document.getElementById("click").addEventListener("click", function () {
    console.log(bgImg.backgroundImage);
});

In this example, canvas.backgroundImage is displayed in the console when you click on the button : http://jsfiddle.net/LOLKFC/PQe5e/