20 Shockingly Cool HTML5 Canvas Applications

HTML5 offers a wide variety of advanced functionality over what HTML was originally capable of.  Perhaps the most powerful aspect of HTML5 is the HTML5 canvas.  The canvas element is a drawable region defined in HTML code with height and width attributes. JavaScript code can access the canvas through a full set of drawing functions allowing for dynamically generated graphics.

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!

Sketchpad

Sketchpad by Michael Deal uses the canvas element and a lot of JavaScript to create an impressive painting application.

html 8

Color Cycling

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.

html 13

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.

html 1

Threshold Filter

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.

html 2

Reflections

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.

html 3

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.

html 4

Water Ripple

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.

html 5

HTML5 Love

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.

html 6

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.

html 7

Liquid Particles

Daniel Puhe has created this interesting liquid motion particle demo. There are two flavours: the traditional dots and letters.

html 9

Lucid Chart

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.

html 10

AJAX ANSI Player

Meph has created a ANSI Art viewer that draws ANSI files to a HTML5 canvas. All the decoding is done client-site in JavaScript. Computed ANSI files can be saved PNGs.

html 11

Canvas Sphere

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.

html 12

Dynamic Image Collage

Berry de Vos (aka RadicalFX) has created a Dynamic Image Collage creation tool, built with canvas.

html 14

jTenoriOn

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.

html 15

Music Visualization

html 16 500x248

Tiler 3D

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.

html 17

iGrapher

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.

html 18

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.

html 19

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.

html 20

20 Responses to “20 Shockingly Cool HTML5 Canvas Applications”
  1. Ryan Ford November 11, 2010
  2. Mario Luevanos November 11, 2010
  3. Eric Shafer November 11, 2010
  4. heather wetzler November 11, 2010
  5. Djordje Ungar November 11, 2010
  6. Luka Kladaric November 11, 2010
  7. mmse November 12, 2010
  8. "Cowboy" Ben Alman November 12, 2010
  9. Tomas November 13, 2010
  10. angela November 16, 2010
  11. jswidget November 17, 2010
  12. vicky November 18, 2010
  13. Matt Mazur November 28, 2010
  14. max November 28, 2010
  15. Prodyot January 7, 2012
  16. Jane' s Conference January 26, 2012
  17. pootzko April 18, 2012
  18. Andrew May 12, 2012
  19. rolf August 27, 2012

Leave a Reply

Your email address will not be published. Required fields are marked *