Blog Design Development Mobile Inspiration CSS Javascript News Opinions Politics Menu

Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet
HTML5 Canvas Text Font, Size, and Style Tutorial

HTML5 Canvas Text Metrics Tutorial

Description

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.

Demo