Что такое Canvas (графика в браузере)

Где это нужно бизнесу

• Первый экран должен сразу показать, чем занимается специалист или компания, — живой картинкой, а не стоковой фотографией.
• Нужен интерактивный элемент: модель, которую можно покрутить пальцем.

Как мы это используем

На сайте-визитке Валерия Афанасьева, инженера по 3D-печати и реверс-инжинирингу, первый экран — окно 3D-сканера на canvas 2D без внешних библиотек: три детали вращаются, луч сканера превращает облако точек в каркас, модель поворачивается мышью или пальцем. Финансовый ассистент рисует графики дашборда через Chart.js, который тоже работает на canvas.

Типичные проблемы

• Телефон греется и садится. Рисование идёт только пока окно видно и вкладка активна, облако облегчено до 560 точек на деталь, не больше 30 кадров в секунду, плотность пикселей ограничена 1,5. По замерам разработчика время скриптов на первом экране вдвое меньше первой версии.
• Экономия трафика. При включённом в браузере режиме экономии показывается один статичный кадр.

Когда это не нужно

Если графика не несёт смысла, а только украшает, лучше лёгкая картинка: она быстрее и не тратит батарею.