javascript - Optimize text rendering in the canvas - the rendering speed of truetype versus bitmap fonts -

i profiled canvas-based app i'm working on (linkurious.js) , discovered main bottleneck text rendering currently.

so, use filltext() render text but:

• would more efficient use bitmap fonts ?
• distance fields ?
• do browser optimize font rendering enough shouldn't try beat them ?

first of rendering text, vector-based, hard. couldn't beat browser webgl based implementation, browser font rendering pretty optimized (browsers have been rendering fonts since 1994).

in theory, if text doesn't change, browser / font engine should recreate , cache rendered glyphs in gpu memory , blit them out there bitmaps.

so if text performance bottleneck bitmap fonts become option. there plenty of downsides, speed not 1 of them. after all, how computers of 90s managed produce text on screen @ all.