CODEWITHSUNDEEP
javascripthtmlcanvas
Ryan
Ryan

Reputation: 2404

HTML5 Canvas: fontBoundingBoxAscent vs. actualBoundingBoxAscent

The TextMetrics API returns a few fields with similar names:

The MDN docs is not very clear and does not provide a visual. What is the difference between them?

Also, as a follow-up, how can I calculate the height of the text from these values?

Upvotes: 3

Views: 3180

Answers (1)

Huso
Huso

Reputation: 1486

Perhaps these documentation are more clear:

fontBoundingBoxAscent

The distance from the horizontal line indicated by the textBaseline attribute to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels; positive numbers indicating a distance going up from the given baseline.'

fontBoundingBoxDescent

The distance from the horizontal line indicated by the textBaseline attribute to the bottom of the lowest bounding rectangle of all the fonts used to render the text, in CSS pixels; positive numbers indicating a distance going down from the given baseline.

actualBoundingBoxAscent

The distance from the horizontal line indicated by the textBaseline attribute to the top of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going up from the given baseline.

actualBoundingBoxDescent

The distance from the horizontal line indicated by the textBaseline attribute to the bottom of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going down from the given baseline.

Source:

https://webplatform.github.io/docs/apis/canvas/TextMetrics/fontBoundingBoxAscent/ https://webplatform.github.io/docs/apis/canvas/TextMetrics/fontBoundingBoxDescent/ https://webplatform.github.io/docs/apis/canvas/TextMetrics/actualBoundingBoxAscent/ https://webplatform.github.io/docs/apis/canvas/TextMetrics/actualBoundingBoxDescent/

To calculate the text height you can do the following:

fontHeight = fontBoundingBoxAscent + fontBoundingBoxDescent;
actualHeight = actualBoundingBoxAscent + actualBoundingBoxDescent;

fontHeight is the bounding box height regardless of the string being rendered. actualHeight is specific to the string being rendered.

Upvotes: 6

Related Questions