Looking back, it might have been just as easy to move text boxes in the DOM, and it was a good opportunity to try out CSS3 animation… but I haven’t done any canvas stuff in a while and I sort of wanted to play with the text. Besides, there were a few things I wanted to play with. Like measuring the width of a string on the canvas and basing a position upon that information.
The canvas is a bit tricky with telling you the width of a block of text, and it won’t tell you the height, so I’m interested to check this out from other computers and other browsers. Courier New on my machine is not necessarily the same as Courier New on your machine… so will the measurements be off from computer to computer? Probably. But maybe I can adjust for it.
On the whole, it’s pretty simple. The script checks with Modernizr for canvas support, and starts off if things are okay. Then it uses jQuery to see if the parent of the canvas is visible. If so, it draws the canvas. This doesn’t matter much on the test page, but on this site the header gets hidden if the window is too small for it. Although I wanted to keep requesting animation frames in case the window got bigger again, I didn’t want to draw things that the user couldn’t see. So it just sits and quietly counts until it’s parent (the main header) is visible again before updating and drawing anything.
For those without canvas support, there is no content inside the canvas. It should just sit there empty and transparent if you’re using some goofy browser without modern features. And if Modernizr puts the no-canvas class on the
html tag, then they get a nice jpg background. For modern browsers, the CSS gives you a white background and renders the canvas. To make the whole thing fit, it’s absolutely positioned and the parent is set to overflow:hidden. This allows it to keep moving without busting out of the layout.
Lastly, there’s the super-nifty method I used to programmatically add and arrange the text… um… yeah, about that…
I just eye-balled it. I did base some measurements on the text width, but in the end I just created an object with the text values I wanted, put them into animation objects and added them to an array to be updated. It’s not what I would do for a big company, but it works for little bells and whistles like this.
Same Day, After Some Testing at work
The text looks a bit jumpy on the PC at work today, even though it was using Chrome. This makes me think that maybe I shouldn’t be animating text in quite this way. I think I’ll make a sprite and load an image of the text instead.
I’ll leave things as-is for the moment, but it will be updated to a sprite-based animation within the week. I’ll keep that test page, though.
Switching to an Image Sprite
I finally did switch it up. (There’s a link to the image link demo at the top of this post.) I like the look of things, but I’m still not happy with the programming. I figured that I would spend too much time working out a dynamic way to get the results I wanted, but in the end I spent just as much time eye-balling things again. Let that be a lesson to all of us, kids.