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

Question

JavaScript

Faced on the project with the following situation.
There is a custom video player with a timeline implemented through canvas.
There is a canvas with a size of ~ 1600 * 8 and, according to the condition, up to 150-200 rectangles of a different color should be drawn on it.

The first solution was to draw using fillRect(). Then changed to moveTo(), lineTo(), stroke().
Since the story is old, the author of this commit can no longer be found.

If anyone has encountered similar tasks, tell me if there is a noticeable difference in performance between these options? (in parallel, I will try to recreate the situation when there are really a lot of rectangles)
In my understanding, drawing a regular rectangle is a simpler task. This is true?

Answer 1

Did you figure out which is faster? I tested rendering in chrome with throttling, it became interesting whether throttling affects it this way or the picture is really the same as it turned out for me, they
are drawn almost alone when drawing one square at a time:
what - fillRect()
what - ctx.beginPath() ctx.moveTo() ctx.lineTo() ctx.stroke()
drawdowns start when drawing in groups:
so - n*times rect() and at the end call fill()
or - n*times ctx.moveTo() + ctx.lineTo() and at the end call ctx.stroke()