{{CanvasRef}}
The TextMetrics
interface represents the dimension of a text in the canvas, as created by the CanvasRenderingContext2D.measureText()
method.
Properties
There is no inherited property.
- {{domxref("TextMetrics.width")}} {{readonlyInline}}
-
Is a
double
giving the calculated width of a segment of inline text in CSS pixels. It takes into account the current font of the context. - {{domxref("TextMetrics.actualBoundingBoxLeft")}} {{readonlyInline}}
-
Is a
double
giving the distance parallel to the baseline from the alignment point given by the {{domxref("CanvasRenderingContext2D.textAlign")}} property to the left side of the bounding rectangle of the given text, in CSS pixels. - {{domxref("TextMetrics.actualBoundingBoxRight")}} {{readonlyInline}}
-
Is a
double
giving the distance parallel to the baseline from the alignment point given by the {{domxref("CanvasRenderingContext2D.textAlign")}} property to the right side of the bounding rectangle of the given text, in CSS pixels. - {{domxref("TextMetrics.fontBoundingBoxAscent")}} {{readonlyInline}}
-
Is a
double
giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels. - {{domxref("TextMetrics.fontBoundingBoxDescent")}} {{readonlyInline}}
-
Is a
double
giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the top of the bounding rectangle of all the fonts used to render the text, in CSS pixels. - {{domxref("TextMetrics.actualBoundingBoxAscent")}} {{readonlyInline}}
-
Is a
double
giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the top of the bounding rectangle used to render the text, in CSS pixels. - {{domxref("TextMetrics.actualBoundingBoxDescent")}} {{readonlyInline}}
-
Is a
double
giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the bottom of the bounding rectangle used to render the text, in CSS pixels. - {{domxref("TextMetrics.emHeightAscent")}} {{readonlyInline}}
-
Is a
double
giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the top of the em square in the line box, in CSS pixels. - {{domxref("TextMetrics.emHeightDescent")}} {{readonlyInline}}
-
Is a
double
giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the bottom of the em square in the line box, in CSS pixels. - {{domxref("TextMetrics.hangingBaseline")}} {{readonlyInline}}
-
Is a
double
giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the hanging baseline of the line box, in CSS pixels. - {{domxref("TextMetrics.alphabeticBaseline")}} {{readonlyInline}}
-
Is a
double
giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the alphabetic baseline of the line box, in CSS pixels. - {{domxref("TextMetrics.ideographicBaseline")}} {{readonlyInline}}
-
Is a
double
giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the ideographic baseline of the line box, in CSS pixels.
Methods
There is no specific and no inherited method.
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('HTML WHATWG', "the-canvas-element.html#textmetrics", "TextMetrics")}} | {{Spec2('HTML WHATWG')}} | No difference from {{SpecName('HTML Canvas 2D Context W3C')}}. |
{{SpecName('HTML Canvas 2D Context W3C', '#textmetrics', 'TextMetrics')}} | {{Spec2('HTML Canvas 2D Context W3C')}} | Initial definition. |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 4.0 | {{CompatGeckoDesktop("1.8")}} | 9.0 | 9.0 | 3.1 |
actualBoundingBoxLeft , actualBoundingBoxRight , fontBoundingBoxAscent , fontBoundingBoxDescent , actualBoundingBoxAscent , actualBoundingBoxDescent , emHeightAscent , emHeightDescent , hangingBaseline , alphabeticBaseline , ideographicBaseline |
{{CompatNo}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 | {{CompatGeckoMobile("1.8")}} | {{CompatUnknown}} | 10.0 | 3.2 |
actualBoundingBoxLeft , actualBoundingBoxRight , fontBoundingBoxAscent , fontBoundingBoxDescent , actualBoundingBoxAscent , actualBoundingBoxDescent , emHeightAscent , emHeightDescent , hangingBaseline , alphabeticBaseline , ideographicBaseline |
{{CompatUnknown}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
See also
- Creator method in {{domxref("CanvasRenderingContext2D")}}.
- The {{HTMLElement("canvas")}} element and its associated interface, {{domxref("HTMLCanvasElement")}}