A canvas measureText example

function xcanvas() {
    drawShape(document.getElementById('slcanvas'));
    drawShape(document.getElementById('vmlcanvas'));
    drawShape(document.getElementById('flashcanvas'));
}
function matrix() {
    drawShape(document.getElementById('slcanvas'), 1);
    drawShape(document.getElementById('vmlcanvas'), 1);
    drawShape(document.getElementById('flashcanvas'), 1);
}
function drawShape(canvas, matrix){
    if (!canvas.getContext){ return; }

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

    if (matrix) {
        ctx.clear();
        ctx.translate(-10, 5);
        ctx.scale(1.2, 0.8);
        ctx.rotate(5 * Math.PI / 180);
    }
    var fillText = "measureText";

    ctx.textBaseline = "top";
    ctx.font = "32pt Arial";

    ctx.fillStyle = "red";
    ctx.fillText(fillText, 20, 20);

    var dim = ctx.measureText(fillText);
    ctx.font = "16pt Serif";

    ctx.fillStyle = "orange";
    ctx.fillText(["width:", Math.round(dim.width), "px,",
                  "height:", Math.round(dim.height || 0), "px"].join(" "), 20, 80);
}