Measure text height on an HTML5 canvas element

To measure text height on an HTML5 canvas element, you can extract the font size from the canvas context's font property or use the TextMetrics object for more precise measurements.

Method 1: Extracting Font Size from Font Property

Set the font size in points and extract the numeric value:

<canvas id="myCanvas" width="400" height="200"></canvas>

<script>
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

// Set font in points
context.font = "15pt Calibri";

// Extract height using regex to match digits
var height = parseInt(context.font.match(/\d+/), 10);

console.log("Text height:", height, "points");
</script>

Text height: 15 points

Method 2: Using TextMetrics for Accurate Measurement

For more precise height measurements, use the measureText() method which returns a TextMetrics object:

<canvas id="textCanvas" width="400" height="200"></canvas>

<script>
const canvas = document.getElementById('textCanvas');
const context = canvas.getContext('2d');

context.font = "24px Arial";
const text = "Sample Text";

// Get text metrics
const metrics = context.measureText(text);

// Calculate approximate height
const fontSize = parseInt(context.font.match(/\d+/), 10);
const approximateHeight = fontSize * 1.2; // rough estimate

console.log("Font size:", fontSize, "px");
console.log("Text width:", metrics.width);
console.log("Approximate height:", approximateHeight, "px");

// Draw text to visualize
context.fillText(text, 10, 50);
</script>

Font size: 24 px
Text width: 108.1875
Approximate height: 28.8 px

Method 3: Using actualBoundingBoxAscent and actualBoundingBoxDescent

Modern browsers support more precise height measurements through TextMetrics properties:

<canvas id="preciseCanvas" width="400" height="200"></canvas>

<script>
const canvas = document.getElementById('preciseCanvas');
const context = canvas.getContext('2d');

context.font = "20px Georgia";
const text = "Text Height";

const metrics = context.measureText(text);

// Check if browser supports these properties
if (metrics.actualBoundingBoxAscent !== undefined) {
    const actualHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
    console.log("Actual text height:", actualHeight.toFixed(2), "px");
    console.log("Ascent:", metrics.actualBoundingBoxAscent.toFixed(2));
    console.log("Descent:", metrics.actualBoundingBoxDescent.toFixed(2));
} else {
    console.log("Browser doesn't support precise text metrics");
}

// Draw the text
context.fillText(text, 10, 50);
</script>

Actual text height: 18.75 px
Ascent: 15.23
Descent: 3.52

Comparison of Methods

Conclusion

For quick estimates, extract the font size using regex. For precise measurements, use TextMetrics properties like actualBoundingBoxAscent in modern browsers.