I’ve been using HTML5 Canvas for a few web apps, and for the last year I’ve been avoiding rendering any text because Canvas lacks text support. Over the last year, several people have come up with workarounds.
- 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:
