I am rendering tiny text on a canvas instance and it works as expected on Firefox 4, but on Chrome and Safari the font renders using the minimum font size set in these browsers, which is already at its minimum and can't be lowered through the UI, (which looks like a 6px font size) but it is still too big for what I want to accomplish.
The code I am using to print the font is similar to the following, in case it might be useful:
ctx.font = '4px Monospace';
ctx.fillText("Any text", 0, 10);
So, is it possible at all to override the minimum font size settings?
Update: I know a text is not readable at 4px, but that's not the point of the question. I don't need it to be readable at all, as a matter of fact.
Update 2: On Safari this solution works, but it still doesn't work in Chrome.
Thanks.
You could try using a bigger font and scaling the context:
ctx.font = '8px Monospace';
ctx.save();
ctx.scale(0.5, 0.5);
ctx.fillText("Any text", 0, 20);
ctx.restore();
Remember to keep the scaling in mind when specifying the position of your text.
This could easily reduce the graphics quality of the text, but at that size it will be pretty unreadable anyway.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With