13 December 2016
Multi-font Rendering on an HTML Canvas

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
      grow text
  emit block

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

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.