HTML5 canvas karaoke

I decided to try to make a web-karaoke, but that the text was beautifully displayed - not literally, but smoothly. The solution was simpler than I thought.

The literal version is quite simple - just get by with CSS, see the example on JSFiddle .

A more beautiful option is to use canvas and text coloring using the gradient style:

var gradient = ctx.createLinearGradient(0, 0, 30, 0); gradient.addColorStop(0.00, 'yellow'); gradient.addColorStop(0.01, 'black'); gradient.addColorStop(1.00, 'black'); ctx.fillStyle = gradient; 

The gradient itself (as a transition from one color to another - see below figure on the left) is not needed to display karaoke, because an additional point is used - 0.01, so that the main part of the “gradient” (0.01-1.00) remains black and a small part ( 0.00-1.00) - yellow (see the figure below on the right):

(alternatively, set a small value for the third parameter - x1 (gradient ends) - in createLinearGradient ).
')
However, if you just draw the text:

 ctx.fillText(text, 0, 0); 

then it will be displayed in only one color - black:


The fact is that the gradient is applied relative to the origin of the coordinate system. In the figure above, point 0 along the x axis is indicated by a black vertical line (shifted along the x axis to the middle of the canvas using the translate method). To apply a gradient, it is enough to draw text with an offset. The part that will be to the left of the origin of coordinates along the x axis will be colored yellow, and the one that to the right will be black:

 ctx.fillText(text, -190, 0); 

To display karaoke, it is now enough to just shift the origin of the coordinate system along the x axis (for example, in a loop, by one pixel) - the text will gradually turn yellow. You can try JSFiddle (the grid and design are taken from this article). You can try text coloring with offset of the text position (without offset of the origin). In the final project, you can see what happened here (you need a VK account).