I’ve been inspired to start exploring the HTML 5 Canvas Element recently. Mostly from OSS contributions to JavaScript for gaming and of course the amazing work that’s been done with WebGL over the past year+ Don’t expect to see anything mind-blowing here though, yet 
Hello World-Like
I thought the best place to start experimenting would be to use some basic interaction, plus some basic math to draw something. So, why not a line! My math is super rusty, but I do know a bit about the coordinate space of Canvas since it shares some similarities to Flash’s. I had no clue what the formula to calculate an angle given 2 points in a Cartesian Coordinate system would be. Don’t laugh too hard grade-school math students! I hadn’t “Googled” yet but I knew that there must be a simple answer.. Wait, haven’t we been calculating this exact thing since the dawn of Flash? I reached over to the bookshelf, blew off the dust and pulled down my copy of (the nearly 10 year old) Rob Penner’s “Programming Macromedia Flash MX” After some quick scanning through Chapter 3, there were the answers and I was on my way! 30 minutes later, here’s what I ended up with:
(Roll your mouse over to interact. Right-click to view the frame source to see the details)
Take Aways
Canvas is fun! It’s a low-level graphics API, which may feel limiting and foreign; especially if you are coming from the Display-Object paradigm in Flash, but at the same time it’s quick to work with and powerful.
JavaScript’s (ECMA) Math.atan2() was the key to having a built-in function that manages Cartesian Coordinate systems.
I need to learn more about Canvas (2d) context and the drawing buffer, resetting the canvas by reassigning the width seems hackish.
I love working with the HTML5 stack! It feels really fluid to work with compared to the often bloated compiled workflow of Flash.
More to come!
