canvas font height the same as pixel height?

  canvas, javascript

I’m having a hard time to match a canvas rectangle to the same height as a font.

enter image description here

In this picture I shared, I have text written like so:

ctx.font = `${fontStyle.fontSize}px Roboto-Light`;

where fontSize is 20 (20px).

The rectangle is drawn with the same height as the font size, 20px.

This gets even more messy with new lines (with a word wrap) and with different fonts. For example, my font family, Roboto-light loads in after, so the calculation of the lines of texts can change, but that seems to be a different issue.

Is there any easy solution to create a rectangle element that is the same size of the height of context.fillText()?

Source: Ask Javascript Questions