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 ?

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 ?

• javascript
• fabricjs

Share Improve this question Follow edited May 23, 2017 at 12:25 CommunityBot 111 silver badge asked Jun 13, 2016 at 14:26 CheitanCheitan 14122 silver badges1313 bronze badges 3

• do you use F12 from webbrowser? – lordkain Commented Jun 13, 2016 at 14:28
• 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 Commented Jun 13, 2016 at 14:39
• hmm... i can only wish you good luck then! or provide small working sample with isolates your error – lordkain Commented Jun 13, 2016 at 14:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

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.