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 :)