But let’s say that what you really wanted was an effective “This is some text”, that is something like:
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:
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:
The complexity has been pushed down into the
splitHtml function. Unfortunately, that function isn’t available out of the box.
This is very simplified view.
- No verification of the html is being done
- Nothing more than bold is being handled
- No text resets are shown
- No memory of the font mod is maintained
- Nothing on block emission is detailed
A working implementation needs to do all of this and more. The point is that it’s not really hard to translate marked-up text into blocks, it’s just tedious.
So, it isn’t hard to do multi-font html canvas rendering, 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 rendering features to include multi-font. The functionality will be in the 7.18 release of the package, but until then it is currently available on their develop branch.