Canvas Cheat Sheet

HTML5 Canvas Text Metrics Tutorial

Discussion

To get the text metrics of HTML5 Canvas text, we can use the measureText() method of the canvas context which returns an object containing a width property. This method requires a text string and returns a metrics object based on the provided text and the current text font assigned to the context.

Note: Since the height of the text in pixels is equal to the font size in pts when the font is defined with the font property of the canvas context, the metrics object returned from measureText() does not provide a height metric.