Month: May 2012

[This is part 6 of an ongoing series of posts examining the HTML5 Canvas element. In Part 1 of this series, I introduced Canvas and prepared a template to make further explorations a bit simpler, and also introduced JsFiddle, a neat tool for experimenting with and sharing web code. In Part 2, I demonstrated the ability of Canvas to allow your page background to shine through, and showed you how to render simple shapes on the drawing surface. In Part 3, I showed how to draw paths and text in Canvas. In Part 4, I showed how to transform the drawing context and scale, rotate, and skew your drawings. In Part 5, I introduced basic animation concepts, including the animation loop.]

The Part Where Things Get Messy

Now that you know how to get a shape moving across the screen, you’re probably wondering what’s next. Well, the truth is that the animation code we looked at in the previous installment of this series was fairly primitive, and if we tried to scale it to an animation or game with many shapes, we’d be writing a LOT of repetitive code, and we’d soon end up with a very messy batch of spaghetti.

Continue reading Exploring HTML5 Canvas: Part 6 – Managing Animated Shapes