Как определять порядок наложения изображений на canvas?

Question

[ekdown]

Добрый вечер!
Я создаю игру на HTML5 Canvas, что-то типа этого:


Все здания/дороги будут рисоваться на canvas
От SVG пришлось отказаться, дабы не подвесить за ноги мобильные (и не только) браузеры.
Изображения в процессе отрисовки накладываются друг на друга,но это нужно как-то контролировать - чем меньше ордината ( y ), тем "дальше" будет находиться слой с изображением здания.

Так как же контролировать порядок наложения отрисованных изображений?
UPD: насколько сильно подвесит браузер использование отдельного canvas для каждого здания?

Answer 1

[barkalov]

Так как же контролировать порядок наложения отрисованных изображений?

Рисовать в нужном порядке. От дальних к ближним.
После того, как они уже отрисовались - никак.

Comments

[Виталий Желтяков]

Ну либо разбивать на уровни так же от дальнего (левого верхнего) к ближнему (правому нижнему)

[ekdown]

Юзер тыкает в сетку, и там рисуется изображение. Как определить и правильно нарисовать его нужным слоем?

[barkalov]

@ekdown Пронумеровать сетку сверху вниз, слево направо - это будут z-index'ы ячеек. Затем определить размер прямоугольника, описывающего рисуемый спрайт. Создать новый canvas размером с этот прямоугольник. Перерисовать на нём все спрайты которые были (плюс новый) в порядке z-index. "Вклеить" прямоугольник на основной canvas.

[ekdown]

@barkalov, я вот еще что придумал: просто перерисовывать спрайты в нужном порядке заново каждый раз после добавления нового.

Answer 2

[Павел Китьян]

Использовать библиотеки типа Paper.