Fabric.js在画布上的图像上分层文本

Question

So, I've just recently begun working with HTML5 and canvases , I'm currently working with fabric.js . But, I ran into an issue, and after spending the last 12 hours trying different things, I've decided to come here for help, so here it is:

Using fabric.js,

I've layered a bunch of images to make it how I want, but now I want to be able to write over those images using fabric.js. I can only get it to write either all of them in the write spot, but wrong z-position(the words end up all BELOW the image and I think the background-image too - the words flash quickly then disappear), by putting it in the callback, all six text objects end in the exact same spot. So, how do I go about this? I've tried bringToFront(), sendToBack(), moveTo() , and there was a function where it inserted it right into the spot, but I forgot it. But, there's a good chance I ended up using them wrong because I'm very new to fabric.js.

Here's a link to the basic code: http://pastebin.com/TxNCKAkD

But, the main places I guess I'd assume the issues are at are:

text[i] = new fabric.Text("ChiefKeef", {
       top: (5+(65*topShift)),
       left: leftShift+15,
      hasControls: false,
       fill: "orange",
      fontFamily: 'pokeText'
        });
canvas.add(text[i]);

The one above is in a for loop, and each add is put in an array.
And here, which is a simpler place:

var tbText = new fabric.Text("Sentence", {
    top: 210,
    left: 15,
    hasControls: false,
    fill: "#32CD32",
    fontFamily: 'pokeText'
});
 canvas.add(tbText);

And both of these work, but the text is placed behind all of the images no matter what I've done. So, how do I get this text above the images I have placed already? Thanks for reading and hopefully someone can help me out. If I missed anything, or you need extra info, I'll gladly provide it :)

Answer 1

i added canvas.sendToBack(y); & canvas.sendToBack(textBox); into the function body , where you add the panel png & the textbox png, and it works. The i-text objects ' ChiefKeef ' are above the pane image.

i 've made a jsfiddle with sample images because i could not reproduce yours, but you can see the result(by pressing the monkey :) ). http://jsfiddle.net/5KKQ2/495/

snippets:

x[i] = new
fabric.Image.fromURL("https://t2.ftcdn.net/jpg/00/97/16/03/500_F_97160389_tVczY4dIrtaRFkSMhV9elnU0NBMVJ1Y3.jpg", function(y){
    //just add canvas.sendToBack(y);
    canvas.add(y);canvas.sendToBack(y);
}, {
    top: (5+(65*topShift)),
    left: leftShift,
        height:65,
        width:195,
    borderColor: "blue",
    hasControls: true,
    lockMovementX: true,
    lockMovementY: true
});
var textBox = new fabric.Image.fromURL("https://t2.ftcdn.net/jpg/00/90/00/97/500_F_90009771_mWttXqopbyZZMVcyuXd5y2iQeeDK9NJm.jpg", function(textBox){
    //just add canvas.sendToBack(textBox);
    canvas.add(textBox);canvas.sendToBack(textBox);
}, {
    top: 200,
    left: 5,
        height:50,
        width:300,
    borderColor: "blue",
    hasControls: false,
    lockMovementX: true,
    lockMovementY: true
});

hope helps, good luck.