04 September 2018
How to draw multi-colored text on an HTML5 canvas
The HTML5 canvas fillText method is very barebones. If you’re looking to write multi-colored or mixed font style text (even just bold or italicize a word), you’ll quickly realize that you need to make independent calls to fillText for each change in the text style.
Fortunately, this can be pulled off by taking advantage of the ctx.measureText(text) method, which you can use to track where the last part of text finished off.
I wrote a simple convenience function
fillMixedText to showcase how to do this and posted it in this gist: