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: