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

[nataLi-li]

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

[vadim5june]

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

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

[Раед]

как управлять слоями в canvas?

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

[vadim5june]

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

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

[Раед]

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

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

[vadim5june]

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

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

[razerxxx]

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

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

[Раед]

Ну вы наверно с кавасом не работали

Работал

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

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

[vadim5june]

Я буду делать fillText после drawImage.
Координаты никак не относятся к проблеме, которую изложил ТС

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

[Раед]

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

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

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