I initially had (in HW5 Part 2a) some question about whether I should use one canvas tag for the entire keyboard or multiple canvas tags for each key. I was thinking that it makes much more sense to use one for the whole keyboard, since everything will be scaling and translating at once (perhaps with photos off the screen not switching to a larger version? hmm). I started to run into problems, however, when I began to look into displaying text on a canvas tag. There are a few alternatives, and maybe something that doesn’t work in Firefox yet, but all seem to involve drawing the actual typecface vectors manually. This might work for now, but it would be nice to have selectable text on the pages, and I’m worried about S(earch)E(ngine)O(ptimization) later on, so I decided to look for other ways to make it work.
Instead, I continued to move forward with representing the keys as div tags (in HW5 Part 2b). I made a fair amount of progress displaying the keyboard, adding key listeners, and moving keys around appropriately. Multiple sizes are almost, but not quite, working, and once that is done I can work on tweens. I still need the text to resize smoothly though, and might be able to get something based off of this idea to work well, but I’m skeptical. Does anyone know of any other solutions? Maybe generating an image for each text field, and replacing the text with that when it’s being resized, and shrinking the image, and then replacing the image with text again when it’s done resizing?
Note that I’ve noticed these are acting sporadically in browsers other than Firefox 3+, and I’ll try to figure out the browser compatibility issues this week.
HW4 Part 1: http://lehrblogger.com/projects/fall08/ajax/hw4/part1/
HW5 Parts 1 and 3: http://lehrblogger.com/projects/fall08/ajax/hw5/parts1and3/
HW5 Part 2a: http://lehrblogger.com/projects/fall08/ajax/hw5/part2a/
HW5 Part 2b: http://lehrblogger.com/projects/fall08/ajax/hw5/part2b/
HW5 Part 4: http://lehrblogger.com/projects/fall08/ajax/hw5/part4/