CODEWITHSUNDEEP
htmltextcanvas
Ayman
Ayman

Reputation: 11585

HTML5 Canvas font size

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 640x480 pixels, the scaling is such that it is 8x5 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.

Upvotes: 1

Views: 1894

Answers (1)

Simon Sarris
Simon Sarris

Reputation: 63802

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

Upvotes: 3

Related Questions