HTML5 - Canvas

onload = draw;

function draw() {
var canvas = document.getElementById('canvas');
if (!canvas || ! canvas.getContext) {
return false;
}

var ctx = canvas.getContext('2d');
if (!ctx.fillText) {
var extra = document.getElementById('extra');
extra.appendChild(document.createTextNode('Text is not supported on this browser'));
extra.className = 'caution';
return
}

ctx.beginPath();
ctx.moveTo(200,10);
ctx.lineTo(200,200);
ctx.strokeStyle = "#aaeeff";
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.font = "16px Arial, Helvetica, sans-serif";
ctx.fillText('fill, left, 16px', 200, 46);
ctx.font = '24px Georgia, "Times New Roman", Times, serif';
ctx.textAlign = "right";
ctx.fillText('fill, right, 24px', 200, 80);
ctx.font = '32px courier, monospace';
ctx.textAlign = "center";
ctx.strokeText('stroke, center, 32px', 200, 122);
ctx.font = "32px Arial, Helvetica, sans-serif";
ctx.fillText('long text line with maximum width specified as the fourth argument', 200, 164, 400);

ctx.beginPath();
ctx.moveTo(20,250);
ctx.lineTo(380,250);
ctx.moveTo(20,320);
ctx.lineTo(380,320);
ctx.strokeStyle = "#aaeeff";
ctx.stroke();
ctx.beginPath();
ctx.textAlign = "left";
ctx.font = '24px Arial, Helvetica, sans-serif';
ctx.textBaseline = 'top';
ctx.fillText('Top', 20, 250);
ctx.textBaseline = 'hanging';
ctx.fillText('hanging', 140, 250);
ctx.textBaseline = 'middle';
ctx.fillText('middle', 280, 250);
ctx.textBaseline = 'alphabetic';
ctx.fillText('alphabetic', 20, 320);
ctx.textBaseline = 'ideographic';
ctx.fillText('ideographic', 140, 320);
ctx.textBaseline = 'bottom';
ctx.fillText('bottom', 280, 320);

}