Firefox 3.1b2, Safari 4 Beta and HTML 5 canvas text

This will be useful for depicting chemical structures using HTML5 canvas: both Safari 4 beta and Firefox 3.1b2 support the HTML5 canvas text rendering APIs.

There are still rough edges, e.g. it's hard to measure text dimensions and therefore hard to position text properly. Still, it's great to see!

$(document).ready(function() {
    function redraw() {
        var canv = $('#canv');
        var w = canv.width();
        var h = canv.height();
        // Let canvas know how big CSS wants it to be.
        canv.attr("width", w);
        canv.attr("height", h);
        var ctx = canv[0].getContext("2d");
        
        ctx.clearRect(0, 0, w, h);
        
        var msg = "Hello, Safari text.";
        var fontSpec = "24pt Verdana";
        
        // Find out the dimensions of the rendered msg.
        var e = $('<span style="visibility:hidden;font:' + fontSpec + '">' +
                  msg + '</span>');
        $('body').append(e);
        var tw = e.width();
        var th = e.height();
        e.remove();
        
        ctx.save();
        ctx.translate(w/2, h/2);
            // Indented to highlight transformation state.
            ctx.save();
            ctx.rotate(-45 * Math.PI / 180.0);
            ctx.translate(-tw/2, th/2);
            ctx.font = fontSpec;
            ctx.fillText(msg, 0, 0);
            ctx.restore();
        ctx.restore();
    };
    redraw();
});