Advanced canvas

The canvas API is a "big beast", and we have presented all the essential techniques for drawing and animating. However, we could not fit everything in this course. Exotic features that are rarely used by developers, or advanced techniques that require more than 20 lines of JavaScript, have been put aside for the W3Cx HTML5 Apps and Games course.

In that course, you will learn:

• Techniques useful for writing HTML5 games: time-based animation, advanced user interactions (detecting multiple keys plus mouse plus gamepad plus touch events all at the same time in a single version of the code), sprite based animation, collision detection, particle animation;

• Pixel-level operations: special FX like blue-screen videos and augmented reality;

• And many other things, such as: masking/clipping, stacking canvases in layers, composition modes, saving and restoring canvas contents, saving canvas content to disk client-side, drawing a canvas into a canvas, etc.

Examples studied in the HTML5 Apps and Games course

• Small game framework / object oriented JavaScript / advanced event handling / collision detection / time based animation - see example online.

• Sprite based animation: like this one (this is ugly code to demonstrate the principle - in the course we develop a clean, sprite animation framework). Use the arrow keys after clicking in the canvas. It's better to try in standalone mode (click on the small black arrow in the top right of the JSBin window).