I rewrote some JavaScript of mine to use <canvas> instead of a <pre> block to display some data from a database scraped from a webpage. So far, it’s looking a lot nicer:
I can do all sorts of other cool visualizations of the data too. Some things I learned that weren’t in the Mozilla documentation:
save(), restore(), scale(), and translate() are useful, but when you want to do operations about a point other than the origin, setTransform() does a much nicer job when you use a point other 0,0 for the origin. I could have sworn there was a way that didn’t involve me doing math to do it, but I couldn’t find it and ended up just doing the math to get setTransform to work.
scale() does a really horrible job. I abandoned using tiled images and scaled Text. As you can see, I went with a solid background, and in that picture I removed for aesthetics — but I ended up writing my own custom method for scaling text (I had to do more math!).
I’m not sure how far I’ll take this, or in what direction, but I’ll have fun along the way.