Canvas — fillRect() vs moveTo(), lineTo(), stroke()?

Question

[GavrilovArtem]

Столкнулся на проекте со следующей ситуацией.
Имеется кастомный видеоплеер с таймлайном, реализованным через canvas.
Есть канвас размером ~ 1600*8 и на нем нужно по условию отрисовывать до 150-200 прямоугольников другого цвета.

Первым решением была сделана отрисовка через fillRect(). Затем переделано на moveTo(), lineTo(), stroke().
Так как история давняя, автора сего коммита уже не найти.

Если кто сталкивался с подобными задачами, подскажите, есть ли заметная разница по производительности между этими вариантами? (параллельно попробую воссоздать ситуацию, когда прямоугольников действительно много)
В моем понимании отрисовка обычного прямоугольника - это более простая задача. Это так?

Comments

[Ilya Muromtsev]

Не совсем понятен вопрос, зачем отрисовывать 200 прямоугольников и как это связано с видеоплеером? Что конкретно хотите сделать?
Если сравнивать чем рисовать столько фигур, то однозначно fillRect

Answer 1

[killovv]

Разобрался что быстрее? тестировал отрисовку в хроме с тротлингом, стало интересно это тротлинг так влияет или картина и вправду такая как получилась у меня

рисуются почти одинокого при отрисовке по одному квадрату за раз:
что - fillRect()
что - ctx.beginPath() ctx.moveTo() ctx.lineTo() ctx.stroke()

просадки начинаются когда рисуешь группами:
так - n*раз rect() и в конце вызвать fill()
или - n*раз ctx.moveTo() + ctx.lineTo() и в конце вызвать ctx.stroke()