TextMetrics Illustration

This JavaScript program demonstrates how to draw how get and use the TextMetrics of a string in a canvas element.

TextMetricsIllustration.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's Javascript</title>
    <script type="text/javascript" src="TextMetricsIllustration.js"></script>
  </head>
  <body onload="Initialize()">
     <canvas id="idCanvas" width="640" height ="480" style="background-color: #F0F0F0;"></canvas>
     <pre id="idMetrics1"></pre>
     <pre id="idMetrics2"></pre>
     <pre id="idMetrics3"></pre>
  </body>
</html>

TextMetricsIllustration.js

var gqCanvas = null;
var gqContext = null;

function Initialize() {
	gqCanvas = document.getElementById("idCanvas");
	gqContext = gqCanvas.getContext("2d");
	gqContext.strokeStyle = "#AAAAAA";
	gqContext.moveTo(50, 0);
	gqContext.lineTo(50, 480);
	gqContext.stroke();
	
	gqContext.moveTo(50, 150);
	gqContext.lineTo(640, 150);
	gqContext.stroke();
	
	gqContext.moveTo(50, 300);
	gqContext.lineTo(640, 300);
	gqContext.stroke();
	
	gqContext.moveTo(50, 450);
	gqContext.lineTo(640, 450);
	gqContext.stroke();
	
	gqContext.font = "80px arial";
	
	console.log("font = "+gqContext.font);
	console.log("textAlign = "+gqContext.textAlign);
	gqContext.strokeStyle = "red";
	var sString1 = "XoaX.net";
	var sString2 = "Quintessentially";
  var sString3 = "p)$@\xDB\xD1\xDD\xC7\xC5";
	gqContext.strokeText(sString1, 50, 150);
	gqContext.strokeText(sString2, 50, 300);
	gqContext.strokeText(sString3, 50, 450);
	
	gqContext.strokeStyle = 'lightblue';
	
	var qTextMetrix = gqContext.measureText(sString1);
	gqContext.strokeRect(50 - qTextMetrix.actualBoundingBoxLeft, 150 + qTextMetrix.actualBoundingBoxDescent,
		qTextMetrix.actualBoundingBoxRight, -qTextMetrix.actualBoundingBoxAscent-qTextMetrix.actualBoundingBoxDescent);
	qMetrics = document.getElementById("idMetrics1");
	LogMetrics(qMetrics, qTextMetrix);

	qTextMetrix = gqContext.measureText(sString2);
	gqContext.strokeRect(50 - qTextMetrix.actualBoundingBoxLeft, 300 + qTextMetrix.actualBoundingBoxDescent,
		qTextMetrix.actualBoundingBoxRight, -qTextMetrix.actualBoundingBoxAscent-qTextMetrix.actualBoundingBoxDescent);
	qMetrics = document.getElementById("idMetrics2");
	LogMetrics(qMetrics, qTextMetrix);
	
	qTextMetrix = gqContext.measureText(sString3);
	gqContext.strokeRect(50 - qTextMetrix.actualBoundingBoxLeft, 450 + qTextMetrix.actualBoundingBoxDescent,
		qTextMetrix.actualBoundingBoxRight, -qTextMetrix.actualBoundingBoxAscent-qTextMetrix.actualBoundingBoxDescent);
	qMetrics = document.getElementById("idMetrics3");
	LogMetrics(qMetrics, qTextMetrix);
}

function LogMetrics(qPre, qMetrics) {
	console.log("width =" + qMetrics.width);
	console.log("actualBoundingBoxLeft =" + qMetrics.actualBoundingBoxLeft);
	console.log("actualBoundingBoxRight =" + qMetrics.actualBoundingBoxRight);
	console.log("actualBoundingBoxAscent =" + qMetrics.actualBoundingBoxAscent);
	console.log("actualBoundingBoxDescent =" + qMetrics.actualBoundingBoxDescent);
	
	console.log("fontBoundingBoxAscent =" + qMetrics.fontBoundingBoxAscent);
	console.log("fontBoundingBoxDescent =" + qMetrics.fontBoundingBoxDescent);
	console.log("emHeightAscent =" + qMetrics.emHeightAscent);
	console.log("emHeightDescent =" + qMetrics.emHeightDescent);
	
	console.log("hangingBaseline =" + qMetrics.hangingBaseline);
	console.log("alphabeticBaseline =" + qMetrics.alphabeticBaseline);
	console.log("ideographicBaseline =" + qMetrics.ideographicBaseline);
	
	qPre.innerHTML = "";
	qPre.innerHTML += "width = "+qMetrics.width+"\r\n";
	qPre.innerHTML += "actualBoundingBoxLeft = "+qMetrics.actualBoundingBoxLeft+"\r\n";
	qPre.innerHTML += "actualBoundingBoxRight = "+qMetrics.actualBoundingBoxRight+"\r\n";
	qPre.innerHTML += "actualBoundingBoxAscent = "+qMetrics.actualBoundingBoxAscent+"\r\n";
	qPre.innerHTML += "actualBoundingBoxDescent = "+qMetrics.actualBoundingBoxDescent+"\r\n";
	
	qPre.innerHTML += "fontBoundingBoxAscent = "+qMetrics.fontBoundingBoxAscent+"\r\n";
	qPre.innerHTML += "fontBoundingBoxDescent = "+qMetrics.fontBoundingBoxDescent+"\r\n";
	qPre.innerHTML += "emHeightAscent = "+qMetrics.emHeightAscent+"\r\n";
	qPre.innerHTML += "emHeightDescent = "+qMetrics.emHeightDescent+"\r\n";
	
	qPre.innerHTML += "hangingBaseline = "+qMetrics.hangingBaseline+"\r\n";
	qPre.innerHTML += "alphabeticBaseline = "+qMetrics.alphabeticBaseline+"\r\n";
	qPre.innerHTML += "ideographicBaseline = "+qMetrics.ideographicBaseline+"\r\n";
}

Canvas JavaScript

TextMetrics Illustration

TextMetricsIllustration.html

TextMetricsIllustration.js

Output