Cannot bring image to front in FabricJS

Question

I've some troubl to bring a FarbicJS element to the front of the canvas.

After a few web browsing I've found this post : Control z-index in Fabric.js Howerver it seems to have absolutely no effect in my code.

EDIT : this topic also bring some other solutions but no effect either.

I may have done a silly mistake but I can't figure out where. Here is my code (at least, the relevant part) :

//first image, well displayed and functionnal
fabric.Image.fromURL(sourceImg, function(img){
    //don't pay attention to following properties
    img.left = YYY
    img.top = XXX
    img.width = whatever
    img.height = whatever
    img.rega = something

    //big animation part
    img.on('mouseover', function(){
        //blabla
    });
    that.canvas.add(img);
});

//second image (text), not displayed
var myText = new fabric.Text("SI REGA2", {
    //some properties...
    left: YYY //    Here coordonnates of the text are the same
    top: XXX  //    than first image's coordonnates.
    selectable: false,
    hasControls: false,
    hasBorders: false,
    fontSize: 20
});
this.canvas.add(myText); //adding text to the canvas...
this.canvas.bringToFront(myText); //... and bringing back to the front in order to place it over the first image

There is no error in the console, so I think all is going well, but the text is not displayed. Or at least under the first image.

What should I do ?

yep, fantastic tool. Here it doesn't appear but I've tried to `console.log(myText)` and the object seem to be OK. That's what lead me to think that the text is added to the canvas but bellow the image. — Cheitan, Jun 13 '16 at 14:39
hmm... i can only wish you good luck then! or provide small working sample with isolates your error — lordkain, Jun 13 '16 at 14:43

score 5 · Accepted Answer · answered Jun 14 '16 at 00:07

I don't know why, but executing canvas.sendToBack(img);, will put the text in front of the image. canvas.sendToFront(myText); won't though. So the code beneath will put the text in front of the image:

var canvas = new fabric.Canvas('fabric');
canvas.backgroundColor = '#ffffff';
canvas.renderAll();

fabric.Image.fromURL("https://placehold.it/200x200", function(img){
    img.left = 0;
    img.top = 0;
    img.width = 200;
    img.height = 200;

    canvas.add(img);
    //Where the magic happens
    canvas.sendToBack(img);
});

var myText = new fabric.Text("SI REGA2", {
    left: 0,
    top: 0,
    selectable: false,
    hasControls: false,
    hasBorders: false,
    fontSize: 20
});
canvas.add(myText);

JSFiddle

The reason is explained in the [answer of mpedersen](https://stackoverflow.com/a/41834619/57091). — robsch, Mar 04 '20 at 11:03

score 2 · Answer 2 · answered Jan 24 '17 at 17:31

This question has been long answered, but I thought I could add some more information as I've just started tinkering with FabricJS.

The behavior seen here is due to the fact that fabric.Image.fromURL() works asynchronously (the callback function hints to this). So, the myTextobject is added to the canvas first, then the image second.

FabricJS determines z-index by the order added to the canvas, so it makes sense that the image overlaps the text.

Check out the console in this Fiddle to see that the text is added before the image and that the myText object is available within the fabric.Image.fromURL callback.

Cannot bring image to front in FabricJS

2 Answers2