Thanks for checking out this Internet Explorer Platform Preview demo! This demo uses the HTML5 Canvas element and animation techniques to create a ring of colorful gears. These gears turn one another as the outer ring of gears rotates. The speed and quality of the animated scene depends on your browser's graphics implementation and your computer's hardware.

How does Canvas composition work?

The HTML5 Canvas API defines several composition modes via the globalCompositeOperation property. Each composition mode specifies how pixels should be drawn to the Canvas, such as overwriting, combining, or XORing color values. Your browser’s composition speed is dependent on the quality of its Canvas implementation and the performance of your computer hardware.

This demo uses Canvas composition modes, buffering, and coding patterns similar to those used by games. Each gear is composed of off-screen Canvases that cache intermediate renderings. Caching generated images allows game designers to reuse assets and keep downloads small. Off-screen buffering is used by game developers to accelerate rendering speed and achieve smooth animation, especially when sprites are used.

Layer Controls

Try toggling different layers to see how canvas composition modes generate the gears scene.

Performance Dashboard

Revolutions per minute -
Average draw time -