Measure text height on an HTML5 canvas element

To get the text height, set the font in pt −

context.font="15pt Calibri";

Now, get the height like the following −

var height = parseInt(context.font.match(/\d+/), 10);

Above we have used a match to separate the font size from font face.

George John

Published on 06-Apr-2018 08:14:41

• Related Questions & Answers
• Change colour of an image drawn on an HTML5 canvas element.
• HTML5 Canvas Circle Text
• Drawing an SVG file on an HTML5 canvas
• Crop Canvas / Export HTML5 Canvas with certain width and height
• Print a HTML5 canvas element
• How to draw an SVG file on an HTML5 canvas?
• HTML5 Canvas Font Size Based on Canvas Size
• How to prevent text select outside HTML5 canvas on double-click?
• Properties to create text using HTML5 Canvas
• addEventListener for keydown on HTML5 Canvas
• Update HTML5 canvas rectangle on hover
• How to put an outline on a canvas text on Tkinter?
• HTML5 Canvas Text Stroke for Large Font Size
• Create a text inside circles in HTML5 Canvas
• Can the HTML5 Canvas element be created from the Canvas constructor?