Много canvas'ов
 

У меня задача, сделать что то типа очень большого графа. Состоящего из отдельных "графиков".

Представьте, что задача состоит в написании какой нибудь территориальной области. Где есть города, связанные друг с другом дорогами. А в каждом городе есть ещё сети связанных например магазинов. Связанных тоже по дорогам.

Есть дивы: "города". Очень много. Их располагает администратор. У этих дивов задний фон есть как полупрозрачная картинка. И в самом "городе"
есть ещё дивы "магазины". В общем всё легко и просто. Но мне нужно связать прямыми и кривыми линиями, города и магазины между собой.

Вот всё что у меня есть, только без красоты пока. И лини связей.


Раньше я думал делать один огромный канвас, который был бы размерами как весь мир. На котором нужно было бы только в первый раз отрисовать все линии, а остальное осталось бы за перемещением этого канваса. Но получилось что там около 20000х15000 пикселей, размер канваса. Это вообще убивало на повал всю ОС, не то что бы вкладку. Я сделал шириной и высотой как экранная область, и просто перерисовываю.

Получается следующий пирог: канвас(размерами с экранную область), див мира-> в нём много дивов городов -> в каждом городе свои магазины.

И проблема в том, что фон города будет на линиях канваса. Я как то это разу не подумал(каюсь). И получается фигня.

Я начал думать, что бы делать каждый канвас для города, который служил бы прослойкой между фоном, и магазинами. У меня вопрос. Какова будет производительность? Если будет около 300 канвасов.

Или может вы подскажете другой способ реализации?

Вот именно.

Самого интересует этот вопрос, но глубоко не погружался.

Могу пару направлений для размышлений предложить:
Во-первых смущает размер canvas. Как я понимаю, canvas должен быть того размера который ты реально видишь, а остальное скрываться не вёрсткой, а возможностями самого canvas.

Во-вторых, если элементов предполагается не много (<100 думаю. Поправьте если что), то лучше посмотреть в сторону SVG.
Принцип такой:
Canvas начинает тормозить при увеличении размера самого canvas и ему пофигу на количество элементов, а у SVG наоборот - пофигу на размер области отрисовки, но критично количество элементов.

Сам хочу покопать в сторону WebGL - надеюсь, что там такой проблемы вообще нет.

Не пофиг, если элементами называть слои, а не нечто понятное только человеку в составе пикселей.

А в свге картинки и вставляются и линкуются.

В целом задача сводится к "суть такова, грабить корованы"

Ну, если подняться выше то вполне себе актуальная проблема способа отрисовки большого количества элементов без потери производительности. И я тоже в какой-то момент ставил вопрос подобным образом - что лучше один большой canvas или много маленьких.

Ну если еще выше подняться, то можно посмотреть как гугля рендерит свои карты накладывая вектор поверх растра. Растр у них тыреный, но его можно и самому наделать или рендерить в контексте.

Тут просто вот в чем дело - автору надо к гамаписателям, а это уровень такой, который досюдова не снизойдет. Решения-то давным давно все известны. Он-лайн игр как гавна.

Например начать можно с поиска библиотек, что там рендерит канвас хорошо, что на свг заточено. Я как-то смотрел - тоже как гавна.

С городом. Рисуем кружек. Прямо в пейнте. И устраиваем город по принципу Москвы. Круги связанные лучиками.
Круг у нас есть, кругов может быть бесчисленное множество.
Рисуем несколько лучиков.
Город построен, транспортная система развита. Единственный нюанс что у всех объектов в городе есть места которые они могут занимать. то есть вдоль кружочков или вдоль лучиков.

Если есть столица или центральный город то тоже самое что и с объектами в городах. Если нет, тогда устраиваем картинку чётным или нечётным образом(вспомнишь школьный курс?). и располагаем объекты соответственно позициям, и добавляем нужное количество картинок карты дорог.

Какой вопрос то? Задача соединить каждый объект с каждым. Или всё таки это визуализация на карте пути из пункта А в пункт Б?

То есть могу ли я пойти в город Д из города А через город В?

Да, здесь что то типа задачи коммивояжёра.

Скажите же что левая верхняя картинка хитро лыбится.