This video of a canvas3d/javascript demo in Firefox gives me hope. Some parts of my canvas(2d) web app runs 100x slower in Firefox/linux than Safari/OSX. It looks like they have hardware acceleration working, finally :)

Here is some info on Canvas3d in javascript.

• Firefox decided to add a non-standard method called drawWindow(), which lets you composite a hidden iframe with html text.
• The TextCanvas project adds a drawString method to the canvas api, which positions a HTML element on top of the canvas.
• The Variable Width Canvas Fonts project pre-generates an image containing characters at known locations and then uses drawImage to display the necessary characters.
• The very cool CanvasPaint project went nuts and implemented vector fonts in canvas! (more info here)
• None of the above links work in Safari. Despite being the original developers of Canvas, Safari’s Canvas support is extremely buggy. Things work better with the nightly builds, but even then, many things are broken.

I’ve been thinking about giving up on supporting Safari completely, and maybe trying out dojo’s gfx 2D graphics API, which has text support but uses SVG/VML instead of Canvas. For the time being though, I found a silly workaround. Since I only need to display numbers, I can just create 10 pngs, one for each digit. Here is a bash script that creates the number pngs using ImageMagick:

for ((i=0;i<10;i++)); do 
     convert -size 75x100 xc:transparent -quality 100 -font Courier-Bold -pointsize 144 -fill green -draw "text -5,95 '$i'" g$i.png; 
done

Here’s a blurry screenshot of how it looks: