LayoutTests/fast/canvas/canvas-text-baseline.html - WebKit - Git at Google

 <html>
 <body>
 <canvas id="canvas" width=600 height=300 style="border:5px solid black">
 <script>
 if (window.layoutTestController)
   layoutTestController.dumpAsText(true);

 var ctx = document.getElementById('canvas').getContext('2d');

 var x = 10;
 var y = 150;

 ctx.lineWidth = 1;
 ctx.beginPath();
 ctx.moveTo(0, 150);
 ctx.lineTo(600, 150);
 ctx.closePath();
 ctx.stroke();

 ctx.font = "32px 'Times New Roman'";

 var text = "Baseline";
 var w = ctx.measureText(text).width;
 ctx.fillText(text, x, y);
 x += w + 10;

 text = "Top";
 ctx.textBaseline = "top";
 w = ctx.measureText(text).width;
 ctx.fillText(text, x, y);
 x += w + 10;

 text = "Bottom";
 ctx.textBaseline = "bottom";
 w = ctx.measureText(text).width;
 ctx.fillText(text, x, y);
 x += w + 10;

 text = "Middle";
 ctx.textBaseline = "middle";
 w = ctx.measureText(text).width;
 ctx.fillText(text, x, y);
 x += w + 10;

 </script>
	<html>
	<body>
	<canvas id="canvas" width=600 height=300 style="border:5px solid black">
	<script>
	if (window.layoutTestController)
	layoutTestController.dumpAsText(true);

	var ctx = document.getElementById('canvas').getContext('2d');

	var x = 10;
	var y = 150;

	ctx.lineWidth = 1;
	ctx.beginPath();
	ctx.moveTo(0, 150);
	ctx.lineTo(600, 150);
	ctx.closePath();
	ctx.stroke();

	ctx.font = "32px 'Times New Roman'";

	var text = "Baseline";
	var w = ctx.measureText(text).width;
	ctx.fillText(text, x, y);
	x += w + 10;

	text = "Top";
	ctx.textBaseline = "top";
	w = ctx.measureText(text).width;
	ctx.fillText(text, x, y);
	x += w + 10;

	text = "Bottom";
	ctx.textBaseline = "bottom";
	w = ctx.measureText(text).width;
	ctx.fillText(text, x, y);
	x += w + 10;

	text = "Middle";
	ctx.textBaseline = "middle";
	w = ctx.measureText(text).width;
	ctx.fillText(text, x, y);
	x += w + 10;

	</script>