Skip to main content

TextMetrics

The TextMetrics interface represents the dimensions of a piece of text in the canvas; a TextMetrics instance can be retrieved using the CanvasRenderingContext2D.measureText() method.

MDN Reference

Properties​

actualBoundingBoxAscent​

readonly actualBoundingBoxAscent: number;

The read-only actualBoundingBoxAscent property of the TextMetrics interface is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the top of the bounding rectangle used to render the text, in CSS pixels.

MDN Reference

actualBoundingBoxDescent​

readonly actualBoundingBoxDescent: number;

The read-only actualBoundingBoxDescent property of the TextMetrics interface is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the bottom of the bounding rectangle used to render the text, in CSS pixels.

MDN Reference

actualBoundingBoxLeft​

readonly actualBoundingBoxLeft: number;

The read-only actualBoundingBoxLeft property of the TextMetrics interface is a double giving the distance parallel to the baseline from the alignment point given by the CanvasRenderingContext2D.textAlign property to the left side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going left from the given alignment point.

MDN Reference

actualBoundingBoxRight​

readonly actualBoundingBoxRight: number;

The read-only actualBoundingBoxRight property of the TextMetrics interface is a double giving the distance parallel to the baseline from the alignment point given by the CanvasRenderingContext2D.textAlign property to the right side of the bounding rectangle of the given text, in CSS pixels.

MDN Reference

alphabeticBaseline​

readonly alphabeticBaseline: number;

The read-only alphabeticBaseline property of the TextMetrics interface is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the alphabetic baseline of the line box, in CSS pixels.

MDN Reference

emHeightAscent​

readonly emHeightAscent: number;

The read-only emHeightAscent property of the TextMetrics interface returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the top of the em square in the line box, in CSS pixels.

MDN Reference

emHeightDescent​

readonly emHeightDescent: number;

The read-only emHeightDescent property of the TextMetrics interface returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the bottom of the em square in the line box, in CSS pixels.

MDN Reference

fontBoundingBoxAscent​

readonly fontBoundingBoxAscent: number;

The read-only fontBoundingBoxAscent property of the TextMetrics interface returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute, to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels.

MDN Reference

fontBoundingBoxDescent​

readonly fontBoundingBoxDescent: number;

The read-only fontBoundingBoxDescent property of the TextMetrics interface returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the bottom of the bounding rectangle of all the fonts used to render the text, in CSS pixels.

MDN Reference

hangingBaseline​

readonly hangingBaseline: number;

The read-only hangingBaseline property of the TextMetrics interface is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the hanging baseline of the line box, in CSS pixels.

MDN Reference

ideographicBaseline​

readonly ideographicBaseline: number;

The read-only ideographicBaseline property of the TextMetrics interface is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the ideographic baseline of the line box, in CSS pixels.

MDN Reference

width​

readonly width: number;

The read-only width property of the TextMetrics interface contains the text's advance width (the width of that inline box) in CSS pixels.

MDN Reference