I profiled a canvas-based app I'm working on (linkurious.js) and I discovered than the main bottleneck is the text rendering currently.

So, for now I use fillText() to render the text but:

• Would it be more efficient to use bitmap fonts ?
• Distance fields ?
• Do the browser already optimize font rendering enough that I shouldn't try to beat them ?

I profiled a canvas-based app I'm working on (linkurious.js) and I discovered than the main bottleneck is the text rendering currently.

So, for now I use fillText() to render the text but:

• Would it be more efficient to use bitmap fonts ?
• Distance fields ?
• Do the browser already optimize font rendering enough that I shouldn't try to beat them ?

• javascript
• html
• performance
• fonts
• html5-canvas

1 Answer 1

First of all rendering text, especially vector-based, is hard. You probably couldn't beat the browser even with WebGL based implementation, as the browser font rendering is pretty optimized (browsers have been rendering fonts since 1994).

In theory, if the text doesn't change, the browser / font engine should recreate and cache all rendered glyphs in GPU memory and then just blit them out from there as bitmaps.

So if the text is the performance bottleneck bitmap fonts bee an option. There are plenty of downsides, but speed is not one of them. After all, this was how the puters of 90s managed to produce any text on the screen at all.