HTML5 Canvas Tutorials - Measuring size of text on canvas

Measuring text on canvas

The measureText() method measures the width of a given text in pixels and returns a textMetrics object.

measureText(text to be measured);

HTML Code

<html>
<head>
<script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
ctx.font="40px verdana";

// You don't have to draw the text on canvas to measure its width. This is only for reference
ctx.fillText("Believe", 0,40);

// The width of the text will vary with font size. The width is in pixels and is returned as a textMetrics object.
var textWidth = ctx.measureText ("Believe");

// The width of the text is contained in the textMetrics object.width
alert("Text Width: "+textWidth.width);
}
}
</script>
<title>Writing on a canvas</title>
</head>
<body onload="init();">
<canvas id="canvas" width="900" height="500"></canvas><br>
</body>
</html>

Try Code