In this post, you’ll find 20 shockingly cool HTML5 canvas applications that show just a bit of the power of the canvas and demonstrates what you can accomplish with it.
If you’re just getting started with HTML5, check out our other posts:
Hopefully you find these really cool and inspirational!
Let us know what you think in the comments!
Joe Huckaby has gone back to an 8-bit technique for his colour cycling canvas demo. Back in the days of 8-bit video games graphics cards could only render 256 colors at a time so colour cycling was often used to achieve interesting visual effects by cycling (shifting) the color palette.
L-System Turtle Fractal Renderer
The recursive nature of the L-system rules leads to self-similarity and thereby fractal-like forms which are easy to describe with an L-system. Plant models and natural-looking organic forms ‘grow’ and becomes more complex by increasing the iteration level of the form.
A threshold filter converts grayscale or color images into high contrast, black and white images. This threshold filter has been created with canvas by hitode909.
Jean d’Arc has created this 3D texture mapping demo using the HTML5 canvas element. The demo features rotating 3D objects with spherical texture mapping and pixel shading.
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. Raytracing computes the colour of each pixel, the canvas is used to set each pixel colour accordingly.
Almer Thie has created a realtime interactive water ripple effect using the canvas element. All pixels are read out from the canvas, the water ripple effect is applied and all altered pixels are inserted back into the canvas.
This sweet canvas-audio visualisation nicknamed “HTML5 Love” is courtesy of IO from 9Elements. HTML5 Love combines both the HTML5 canvas and audio elements with updates from social networking site Twitter.
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.
Daniel Puhe has created this interesting liquid motion particle demo. There are two flavours: the traditional dots and letters.
Having spent many an hour swearing at Visio, Ben Dilts canvas application LucidChart really blew me away. Ben has successfully created a diagraming application that is intuitive and easy to use. Not only that, but he has created on the web (using canvas) so features such as collaboration are also available.
AJAX ANSI Player
Canvas Sphere by Emil Korngold renders a 2D projection of the 3D points of a sphere using a tiny sprite 3D engine. The demo uses z-sorting and alpha motion blurring to give the sense of 3D and rotation.
Dynamic Image Collage
Berry de Vos (aka RadicalFX) has created a Dynamic Image Collage creation tool, built with canvas.
Joshua Koo has created this canvas implementation of the Tenori-On made by Yamaha. 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.
Ibon Tolosana has produced this exciting 3D image transition canvas demo. Tiler 3D displays a slideshow of an unlimited number of equal sized images in a grid of 3d rotating tiles.
iGrapher is a free web-based financial market visualisation tool for charting, analysis and prediction of different stock, currency and commodity markets. It uses canvas to draw the graphs of financial data.
3D OBJ Viewer
Toxicgonzo has created a canvas application which can read the contents of a 3D .OBJ file and display the results in real-time.
The Wilderness Downtown
For Arcade Fire’s latest song “The Wilderness Downtown”, music video director Chris Milk collaborated with Google’s Creative Lab to produce an interactive video built with HTML5. Among the different technologies applied, canvas is used to render the flocking birds (that fly away from your mouse clicks) and to provide colour correction throughout.