Какие существуют способы оптимизации отрисовки на HTML5 Canvas?

Question

[Aliceloves]

Необходимо ускорить работу Canvas, на котором в реальном времени отображается некоторая схема.

Проблемы в использовании "рядовых" способов оптимизации возникают из-за того, что:

• схема не имеет границ (offset)
• предполагает приближение/отдаление (zoom)
• отрисовывает одновременно до нескольких сотен примитивов (прямоугольник, изображение, текст)
• при всём остальном в обилии имеет линии, связывающие объекты на схеме, из-за чего неясно, как использовать "dirty rectangle".

Answer 1

[silentvick]

Может быть, отвечу не совсем по сути вопроса, но предложу использовать библитеку специально созданную для подобных задач: d3. Это позволит переложить все проблемы оптимизации на плечи самой библиотеки и сконцентрироваться на выполнении первоначальной задачи.

Есть все, что нужно: перемещение схемы (отсутствие границ), зум, события, оптимизированное обновление схемы при изменении данных и прочее. Посмотрите демки.

Comments

[Aliceloves]

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