If you’ve had a chance to use an html canvas to render graphics in a web app, you found you were limited to using a single font to draw text on the screen in JavaScript:

ctx.setFont("16px Helvetica")
ctx.drawText(x, y, "This is some text")

But let’s say that what you really wanted was an effective “This is some text”, that is something like:

ctx.drawText(x, y, "<b>This</b> is some text")

That’s a nice target, and would extend the capability of the canvas element considerably. But imagine getting inside the browser canvas code to make such a change isn’t possible. What to do?

The way to get around this is just drawing piecewise on the canvas:

ctx.setFont("bold 16px Helvetica")
ctx.drawText(x, y, "This")
let offset = ctx.measureText("This").width
ctx.setFont("16px Helvetica")
ctx.drawText(x+offset, y, " is some text")

that is, break the multi-font string into single-font regions, and paint each in turn, offsetting the cursor forward to draw the next text in the right place.

Making a function to draw arbitrary strings of html on a canvas now becomes the goal. It needs to do what was done above:

drawHtmlText = (ctx, x, y, text, baseFont) => {
  let offset = 0
  for (let block of splitHtml(text)) {
    ctx.setFont(block.mod+" "+baseFont)
    ctx.drawText(x+offset, y, block.text)
    offset += ctx.measureText(block.text).width
  }
}

The complexity has been pushed down into the splitHtml function. Unfortunately, that function isn’t available out of the box.

Creating the function to split html text into a series of blocks is an exercise in parsing, a well-studied part of Computer Science going back over half a century. There are a few general purpose parsing packages for JavaScript, but it’s also a pretty straightforward piece of code to write by hand as well.

Schematically, to handle our simple bold text above, it looks like:

splitHtml = (text) => {
  iterating across text,
    if <b> is found
      emit block
    else if </b> is found
      emit block
    else
      grow text
  emit block
}

This is a very simplified outline, but illustrates the idea. A full implementation would need to

• verify the html
• handle all font modifiers (not just bold)
• properly emit the blocks
• handle margins and multi-line text
• maintain font modifiers across lines

and more. The point is that it’s not really hard to translate multi-font text into a series of single-font blocks, some code just needs to be written to do it.

I’ve recently added such code to the vis.js, an open source visualization library for browsers, extending its label text features to include multi-font rendering. The functionality should be released in the 7.18 version of the package.