Well I wanted to learn a little bit about mouse input, but I kept getting side tracked. Here’s what I came up with:
Word Scramble.
When you specify a font is "10px Courier New", what does the 10px part mean? Each letter can be a different width for most fonts; so it’s logical that the 10px wouldn’t refer to the width. What does that leave? Well I assumed it was the height; but it didn’t take long to figure out that wasn’t the case either. Someone at
StackOverflow came up with a way to measure the text. It’s kind of hard to draw text in the center of a rectangle if you don’t know the size of the text.
So, I kinda had this idea for a game of sorts for my son (3yrs) to play. The basic idea was something where he would have to manipulate something like cards with letters laid out on the ground or something. Cards for kids have rounded corners. It’s pretty normal to see rounded rectangles all over the net. Certainly the new HTML 5 canvas element has an easy way to draw these popular shapes. Ha! Nope, but with the help of canvas.context.quadraticCurveTo() it can be done.
So I figured if the cards are just scattered all around the ground the aren’t going to lay perfectly straight. So I worked with making a card rotate letter and all. I didn’t understand how to rotate the canvas the way i wanted to. It took me a while to put together that I had to rotate it in conjunction with using the translate() function. I’m still not sure I completely understand it. I guess the w3c assumes you know what translate means; cuss the html 5 draft didn’t help me at all with this one.
The way I understand it is that the canvas doesn’t rotate around its own center like a lazy susan. The canvas rotates around its top left corner. So if you have a piece of paper and you put it on the table, then you put your finger on the top left corner of the paper with one hand, then spin it with your other hand its kinda the same thing. So what translate() seemed to do was to change where that top left corner of the canvas was. Err.. Well kinda. You still get the same rectangular area on the page. The coordinate system is just different which changes how rotate rotates.
So I was struggling with translate and rotate so I started drawing more than one rectangle. I had one stationary as a marker of sorts while I attempted to make the other spin. I later used the stationary one to help me position the letter. It’s not easy to judge how a letter is misaligned within a spinning rectangle.
When I put the letter inside the rotating rectangle it started to wobble. There was some division used to calculate where the letter should be drawn. I guess depending on what the browser feels like doing with half numbers it may make a different decision when drawing the same letter at the same coordinates. So for example if I did fillText("A", 100, 100.5) the first call may have the "A" drawn at 100, 100. The second time it may draw it at 100, 101. Honestly it seemed to be wobbling by more than one pixel. I solved the wobble problem by using Math.round() on the division used to place the letter. Yeah, that hole wobble nonsense had me scratching my head for a while.
I eventually overlapped the stationary rectangle with the rotating one to confirm it was really rotating in place. It looked kinda cool. I thought hey this would be a good way to indicate that the card is selected or something. I just kept building on that concept to get the sets of counter rotating circles.
At some point I decided to ditch the misaligned cards idea.
There’s more I’d like to share about my findings with this little project, but I’ll save that for another time.