Richard Butterworth Digital Media Design

HTML5 Canvas applications


Below are a series of HTML5 canvas applications developed as part of the teaching materials for City University's Multimedia Design and Development course.

They require a HTML5 compliant browser (they were developed for Firefox, but have been tested on Safari, Chrome and Explorer 9).

  • GalleryScreen shot of the gallery application -- a 3D gallery of artworks from Bridgeman Education. 3D transformations of bitmap images push canvas's performance to the limit, so the app automatically detects whether you're viewing with a mobile device and tunes its performance accordingly.
  • Drum sequencerScreen shot of the drum sequencer application -- allows the user to create visual drum patterns. (Safari struggles with triggering sounds in a regular pattern, and mobile Safari will not allow sound files to be triggered programmatically, so this app will not work on iOS devices).
  • Space invadersScreen shot of the space invaders application -- the classic...

The drum sequencer and space invaders use a set of JavaScript classes called SpriteEngine, specifically developed by Richard Butterworth Digital Media Design, which create a retained mode system on HTML5 canvas. These classes are available on GitHub.