For a live sample please click here or see below the snippet

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Drawing Text using Canvas</title>
<script language="javascript">
function DrawText()
{
	var drawingCanvas = document.getElementById('sampleCanvas');
	if(drawingCanvas.getContext)
	{

		var context = drawingCanvas.getContext('2d');
		context.clearRect(0,0,600,300);
		context.font="20px verdana";
		//context.strokeStyle="red;//to stroke
		context.fillStyle="red";
		context.textAlign="start";//how to place the text to the given point, options are start, end, left, right, center
		context.textBaseline="alphabetic";//orientation of text, options are alphabetic, bottom, hanging, ideographic, middle, top
		var txt="Snippet Directory";
		//context.strokeText(txt,200,150); //to stroke
		context.fillText(txt,200,150);
		document.getElementById('width').innerHTML='Measured width is : ' + context.measureText(txt).width + 'px';
	}
}
</script>
</head>
<body>
<canvas id="sampleCanvas" width="600" height="300" style="border:1px solid #000000">
<p>Your browser doesn't support canvas.</p>
</canvas><br>
<div id="width"></div>
<script>
DrawText();
</script>
</body>
</html>