A simple function for writing mixed color and/or font text on an HTML5 Canvas object.

fill-mixed-text.js

// # HTML5 Canvas: Fill Mixed Text
//
// ctx: CanvasRenderingContext2D
// args: array of objects of form
//   { text: string, fillStyle?: string, font?: string }
// x: number
// y: number
//
const fillMixedText = (ctx, args, x, y) => {
  let defaultFillStyle = ctx.fillStyle;
  let defaultFont = ctx.font;

  ctx.save();
  args.forEach(({ text, fillStyle, font }) => {
    ctx.fillStyle = fillStyle || defaultFillStyle;
    ctx.font = font || defaultFont;
    ctx.fillText(text, x, y);
    x += ctx.measureText(text).width;
  });
  ctx.restore();
};

export default fillMultiColorText;

This defaults to using whatever ctx.font and ctx.fillStyle are set to before the call is made, however in any of the args, you can override either of these values, e.g.,

const ctx = canvas.getContext('2d');
ctx.fillStyle = '#000';
ctx.font = '20px Helvetica';

const args = [
  { text: 'I’m sorry, ' },
  { text: 'Dave. ', fillStyle: 'red' },
  { text: 'I’m ' },
  { text: 'afraid ', font: 'italic 20px Helvetica' },
  { text: 'I can’t do that.' }
];

fillMixedText(ctx, args, 10, 40);