Text always displays under image in Fabric.js

Question

I have the following problem. I have been using Fabric.js for a project and find it easy to use. However I have the following problem that i just don't seem able to solve. I am probably missing the obvious but its time to ask for help.

I can't get a text layar to display ontop of a loaded image. here is the code :

<canvas id="c" height=600 width=800></canvas>

var canvas = new fabric.StaticCanvas('c'); 

fabric.Image.fromURL('http://mozorg.cdn.mozilla.net/media/img/products/badge-   firefoxos.jpg?2013-06', function(img) {
    var imgX = img.set({
      top: 0,
      left: 0,
    });

    canvas.add(imgX);
  });

var text   = new fabric.Text("This text always gets burried", {
    top        : 0,
    left       : 0,
    fontSize   : 50,
    fontFamily : 'Delicious_500'
  });
  canvas.add(text);

canvas.BringToFront(text);
 canvas.renderAll();

I also created a fiddle : http://jsfiddle.net/NkqWL/9/

Any advice is greatly appreciated.

Answer 1

I have updated your fiddle

Fiddle Link:- Click Here

Send your image to back using canvas.sendToBack(imgX);

fabric.Image.fromURL('http://mozorg.cdn.mozilla.net/media/img/products/badge-firefoxos.jpg?2013-06', function(img) {
        var imgX = img.set({
          top: 0,
          left: 0,
        });

        canvas.add(imgX);
           canvas.sendToBack(imgX);
      });