Загружаем информацию в canvas из базы данных!
 

Есть такая задача для построения мини-онлайн-фоторедактора:
нужно загрузить в canvas последовательно фото и текст из базы данных. Получается, но текст всегда оказывается ниже картинки. Как избежать этого? И вообще, как управлять слоями в canvas?

Все зависит от того как вы загружаете
Если в один и тот же канвас загрузить и текст и картинку то взаимным положением легко манипулировать

Это вам не фотошоп, в канвазе слоёв нет.
Взаиморасположение текста и картинки зависит от того, что раньше выведите.

Там все равно что раньше выведем
Там просто координаты задаются и картинке и тексту

Там картинка на текст накладывается, потому, что текст выводится раньше картинки. Координаты тут не причём

Ну вы наверно с кавасом не работали
картинка выводится
ctx.drawImage(img, x, y) -x y rкоординаты
Текст выводится
ctx.fillText(text,x,y)-x y rкоординаты

Была похожая проблема, правда я использовал либу fabric.js.
Так вот, у меня при инициализации загружалось в канвас некоторое количество картинок. По идее они должны были загружаться по порядку, то есть в каком порядке они пришли в json-е - в таком и должны быть на холсте. На деле - те картинки которые загружались быстрее в DOM - оказывались на холсте раньше и соответсвенно путались позиции.
Проблему решил таким хаком - на страничке создал картинку размером 1 пиксель. И собственно ее и грузил вместо необходимых картинок на холст, то есть получалось объекты занимали позицию в порядке очередности, а уже потом менял изображения загруженных объектов.

Скорее всего у вас похожая проблема - текст оказывается ниже - потому что картинка еще не загрузилась в dom. Решение: сначала загрузить картинки в dom, а потом уже загружать все в канвас, либо сделать как я, сначала грузить картинку которая уже есть на странице, а потом подменить на свою

Работал
И что? А если я хочу, чтобы у меня текст был поверх картинки?
Правильно. Я буду делать fillText после drawImage.
Координаты никак не относятся к проблеме, которую изложил ТС

Чтобы текст был поверх картинки нужно чтобы координаты текста были внутри картинки-я это имел ввиду

vadim5june,
Судя по всему они там и есть

а вы по русски говорить можете? как ниже? по кокой оси?
по Y или по Z? ниже может быть как ниже по оси y ,так и перекрываться по оси z
ну как нет, если можно управлять наложением слоёв ?(как они будут складываться)
другой момент в том что нельзя обратится к пред слою,но ничего не мешает их эмулировать

не факт,смотря как настроить наложение слоёв(графики)
globalCompositeOperation

Каких слоёв? Мы не можем ничего передвинуть, после того, как нарисовали. Ни по какой оси. Можем только всё перерисовать. И где тут слои?

доки читай-каждый "рисунок" это слой
-мы можем это эмулировать- читай что написано, а не то, что тебе хочется прочитать

C помощью globalCompositeOperation слои не эмулируются
она предназначена для вывода пересечения двух объектов а слои это наложение двух и более групп объектов

ещё один. читать то умеешь ,что написано выше?где там хоть слово что это эмулирует слои? по русски ведь написано что управляет наложением слоёв(графики)
чего это только групп? для каждого "рисунка". проверь наличие пикселя через стандартную функцию проверки пиксела канвы-после каждого "рисунка" пред пикселы не будут регистрироваться

Есть общепринятое понятие что такое слой-и в канвасе их нет
Если у Вас свое собственное то не навязывайте его другим

открываем информацию достоверную и читаем-каждый раз рисуется сверху на новом слое. слои значит есть, но слоёв нет?
кстати просветите что такое слой по вашему. помниться прошлый раз у вас rect канвы были===div
http://ru.wikipedia.org/wiki/%D0%A1%D0%BB%D0%BE%D0%B9 -я думаю, у вас пространства более чем, чтоб придумать "общепринятое" определение слоя

Вы посмотрите в ответ на какую вашу реплику я сказал-и Вам стенет понятно
Вы там сказали что то про то как можно элемент див повернуть в канвасе
так как див в канвас никак не затащишь то я и ответил что аналогия дива это rect-и то и другое рисует пряяоугольники

С каких это стало так? А аналогия самолёта это велосипед-потому что у него тоже есть крылья:lol:

Это у Вас надо спросить как Вы див в канвасе повернуть хотели

а вот контекст перевирать не нужно-не оценит никто:nono:

вот Ваша реплика
"ну поверни мне div и его любое содержимое в канве"

вырванная из контекста. надоел ты уже .

Взаимно

vadim5june,
да уж блеснул так блеснул своим критинизмом ты у меня в карме...
если ты сам не понимаешь что ты несёшь-тебе никто уже не поможет.....

Да-да, fabricjs и использую. Попробую воспользоваться вашим способом. Спасибо!

хм-м, не получается подменить.

Я делал так:

setNewImage = function(c_object, src) {
    var img = new Image(); 
    img.src = src;
    // если просто сменить фон, то могут быть глюки, поэтому надо сперва загрузить картинку. 
    img.onload = function() { 
        c_object.setElement(img).setCoords(); // смена фона происходит здесь
        canvas.renderAll(); 
    };
}

здесь c_object - канвас элемент, canvas - холст на котором располагаются все элементы