using javascript canvas.context.scale resets custom font

Question

I am making a HTML5 game using javascript with canvas. I am implementing a custom font adding @font-face style tag to header in the .html file, then if I set canvas.context2D.font = "10px FONT_NAME" it works and that part seems to work fine.

But when I scale context2D using canvas.context2D.scale I lose the font and when I try to set it again using canvas.context2D.font = "10px FONT_NAME" it does not work.

It is important to me to set different fonts because the game can use those in different UI or levels. How can I fix this problem?

Answer 1

You can draw the fonts to the canvas instead, which also helps with positioning and scale.

Use a pixel font, copy from an image of the font, letter by letter for what you want to type, then you can just scale as normal. When needing to change fonts, simply copy from a different font image.