html5 canvas text not the specified size

Question

When I specify the HTML5 canvas font as "50px Arial", I'd expect that every uppercase letter would have a height of 50 pixels. However, I'm getting a height of 35 pixels. I couldn't find anything at MDN . What am I missing?

I'm using Firefox Quantum 69.0 (64-bit), with layout.css.devPixelsPerPx property set to 1.

 var cnv = document.getElementById('cnv'); cnv.width = 300; cnv.height = 200; var ctx = cnv.getContext('2d'); ctx.font = '50px Arial'; ctx.fillText('Test',100,100); 

 canvas { background-color:green; width: 300px; height:200px; } 

 <canvas id='cnv'></canvas> 

Answer 1

I doubled up your "Test" text exactly 50 pixels below the original, then superimposed a 50x50 image over the text and guess what?

Turns out ctx.font actually defines line height in pixels. Or at least, there is no distinction made between controlling line height and font size. I can't find a good explanation exactly as to why.

Using pt in place of px to style your font gives you something much, much closer to what you want.