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:




Interested in working with me at Superset to help shape the future of virtual fitness and to empower people to launch their own businesses online? We’re hiring a full-stack engineer. 💪🤓💻 Apply online



Did you find this helpful or fun? paypal.me/mrcoles
comments powered by Disqus

Peter Coles

Peter Coles

is a software engineer living in NYC who is building Superset 💪 and also created GoFullPage 📸
more »

github · soundcloud · @lethys · rss