Question

When I translate and scale the canvas, the text put on the canvas corresponds to the canvas scale. How can I make it fixed size regardless of the scale of the canvas?

Say I have a canvas that I used scale so even though the size is 640×480 pixels, the scaling is such that it is 8×5 canvas units. If I now use context.fillText, the text will be HUGE. I need the text to always be same visual size, say 12px.

Answer 1

you have to temporarily reset the scale (aka set the transformation matrix back to identity) before drawing your text.

// I have lots of transforms right now
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
// Will always draw text in normal scale
ctx.fillText("lalalala", x, y);
ctx.restore();
// Still have my old transforms