Скорость прорисовки на Canvas

[Severtain]

Возник спор:
Что быстрее выполняет код на js ?
1. Рисует 100 простейших фигур с помошью своих станадртных функций (линий)
или
2. Рисует 100 таких же фигур только уже с помошью изображения!
Помогите решить спор!
Я лично думаю, что быстрее отрисует изображения нежели с помошью своих функций!

[trikadin]

Ваш спор, вы и проверяйте.

[DjDiablo]

Здесь думать бесполезно, надо тестировать
Один тест ты пишешь, второй твой оппонент. Очень даже справедливо, получится !

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

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

[Андрей Параничев]

Рисует 100 таких же фигур только уже с помошью изображения!

Что сделать проще, сто машин из деталей, или сто машин из ста машин?

У canvas и dom задачи хоть и пересекаются, но вообще это разные инструменты для разных целей. Нарисовать что-то из линий без canvas вы не сможете, если речь не идет о svg/vml (не дай бог). А вот в схожих задачах, которые можно реализовать либо через canvas либо через dom, второй чаще проигрывает по скорости. Хотя мой тест был слишком реальный - задник страницы сплошь канва, на ней полупрозрачные элементы летают туда-сюда, на заднем фоне в перспективе "переливается" абстрактный элемент; и тоже самое, но через элементы и dom, второй способ делал прокрутку страницы очень тормозной. Однако у канвы есть и свои минусы - на каком-то нарисованном элементе вы не можете словить событие мыши так же, как вы делаете это в dom.

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

[Nekromancer]

Перерисовка всего холста для анимированного сдвига к примеру 30 блоков в canvas сожрёт больше ресурсов, чем анимированное перемещения родительского блока для этих самых 30 блоков в DOM.
Здесь преимущество в том, что DOM элементы со стороны JS так сказать "рисуются один раз". А дальше за вас всё делаем сам браузер, когда вы меняете элементу тот или иной параметр. При отрисовке же на canvas каждый раз всё делается через JS, что конечно медленнее. Даже в современных реалиях. Проверенно на мобильных платформах.
По этому оценивать просто отрисовку 100 блоков глупо, нужен полноценный бенчмарк. И тогда уже сложнее будет предсказать, кто же победит.