[This is part 7 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. In Part 6, I demonstrated some techniques for managing multiple animated shapes in your Canvas implementations.]
Performance Matters
As you start working with HTML5 Canvas, one of the things that you may discover is that the more things you’re drawing, the more likely it is that you will run into performance issues, particularly if your code is not optimized. This is also true the larger your canvas gets, which may especially impact full-screen games or similar implementations.
Continue reading Exploring HTML5 Canvas: Part 7 – Optimizing Animations
