fontBounds

Computes a generic (non-tight) bounding box for a block of text.

The fontBounds() function calculates the bounding box for the text based on the font's intrinsic metrics (such as fontBoundingBoxAscent and fontBoundingBoxDescent). Unlike textBounds(), which measures the exact pixel boundaries of the rendered text, fontBounds() provides a looser measurement derived from the font’s default spacing. This measurement is useful for layout purposes where a consistent approximation of the text's dimensions is desired.

Examples

Syntax


  
      fontBounds(str, x, y, [width], [height])

Parameters

str

String: The text string to measure.

Number: The x-coordinate where the text is drawn.

Number: The y-coordinate where the text is drawn.

width

Number: (Optional) The maximum width available for the text block. When specified, the text may be wrapped to fit within this width.

height

Number: (Optional) The maximum height available for the text block. Any lines exceeding this height will be truncated.

Returns

Object: An object with properties x, y, w, and h representing the loose bounding box of the text based on the font's intrinsic metrics.

Notice any errors or typos? Please let us know. Please feel free to edit src/type/textCore.js and open a pull request!

Related References

textToContours

Returns an array of arrays of points outlining a string of text written using the font.

textToModel

Converts text into a 3D model that can be rendered in WebGL mode.

textToPaths

Returns a flat array of path commands that describe the outlines of a string of text.

textToPoints

Returns an array of points outlining a string of text written using the font.