15 HTML5 Canvas Applications Developers Should Know About

1. SketchPad

Sketchpad is an excellent HTML5 application which helps users create useful painting applications using Javascript and canvas element. Sketchpad’s drawing tools allow for the usual brush, pencil, fill and text items but it also provides tools for spirographs, unusual shapes and stamps.

2. Canvas Color Cycling

Joe has recreated this effect using canvas and some beautiful graphics by Mark J Ferrari. Mark cleverly used color cycling for environmental effects such as rain, snow, ocean waves and smoke.

3. Threshold Filter

A threshold filter converts grayscale or color images into high contrast, black and white images.

4. Reflections

The demo features rotating 3D objects with spherical texture mapping and pixel shading.

5. 3D Planet Viewer

3D Planet Viewer by Chris Adams renders flat images of our planet from the NASA WorldWind WMS servers onto a sphere, allows for rotation/panning and zooming.

6. Music Visualisation with SoundManager2

Jacob Seidelin has created what he believes to be the first music visualization demo using the canvas element and SoundManager2! Playing Radiohead’s Idioteque, the demo displays frequency bars, waveforms, binary outputs and create an image of Thom Yorke, lead singer of Radiohead.

7. Water Ripples

Almer Thie has created a realtime interactive water ripple effect using the canvas element.

8. Strange Attraction

The Strange Attractor demo offers the user a variety of different options, which can influence the demo’s output.

9. CloudKick

Cloudkick Viz uses the canvas element to display cloud server monitoring information in real time. The graph plots servers in real-time in a 3D space according to performance metrics like CPU and memory usage, and ping latency.

10. Liquid Particles

Daniel Puhe has created this interesting liquid motion particle demo. Just move your mouse around the page to have the particles follow the cursor.

11. Canvas Sphere

Canvas Sphere renders a 2D projection of the 3D points of a sphere using a tiny sprite 3D engine.

12. jTenorian

The Tenori-On is a hand-held interface with a surface of 256 LED buttons that glow as you access different sounds and texturesover an infinitely repeating sequence of notes.

13. Dynamic Image Collage

Dynamic Image Collage is built using canvas element. The collage begins with Flickrs search displaying the most popular results first. Clicking any of the results will automatically add them to the collage area as a new layer which can be altered in many different ways.

14. iGrapher

iGrapher is a free web-based financial market visualisation tool for charting, analysis and prediction of different stock, currency and commodity markets.

15. Tiler 3D

Tiler 3D displays a slideshow of an unlimited number of equal sized images in a grid of 3d rotating tiles.