html canvas zindex

How do I change the zindex of an element inside a canvas?

Example code:

fabric.Image.fromURL('http://nocookie.net/bw.jpg', function(image) {
    image.set('left', 200).set('top', 250);
    canvas.add(image);
});


var helloWorld = new fabric.Text('Hello world!', { 
  left: 0, 
  top: 0,
  fontfamily: 'delicious_500',
  zindex: 10
});

canvas.add(helloWorld);

Using the fabric.js library.

For future reference开发者_Python百科:

fabric.Element.html#bringForward

I can't get the dang thing working at all, but here's my guess as to what's happening:

1. Fabric asks that URL for the image. Fabric has been given a callback method when the image is returned, so while it's waiting, it moves on to the next task
2. Fabric creates the Text object and adds it to the canvas.
3. Finally, it notices that the image has loaded (the specific example you provided actually 404'd on me), and passes it to the callback method.

Because the image is added to the canvas after the text, I'm assuming that Fabric is acting just as the canvas normally would: things that are added later are drawn on top of things that are already there. ...Even though you gave the text a z-index.

Remember, I couldn't get it to work and just gave up. So it's entirely possible I'm totally, completely wrong. If that is the case, I have another theory:

Are you sure that zindex is the correct property? If you are, then try setting it on the image, as well:

image.set('left', 200).set('top', 250).set('zindex', 5);

And if you aren't sure, then... there you go.

Since fabric.js version 1.1.4 a new method for zIndex manipulation is available:

canvas.moveTo(object, index);
object.moveTo(index);

i hope this is what you want:

http://jsfiddle.net/Kienz/RRv3g/