15 HTML5 Canvas Applications Developers Should Know About

The introduction of HTML5 introduced variety new features which were not present in old HTML. One of the most noticeable feature being HTML Canvas which allows for dynamic, scriptable rendering of 2D shapes and bitmap images.

You may like this too : HTML5 Drawing toolshtml5/css3 toolshtml5 apps and HTML 5 Cheatsheet infographic.

Today we have gathered a list 15 excellent canvas applications which every developer show 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.

sketchpad

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.

canvas color cycling

3. Threshold Filter

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

threshold filter

4. Reflections

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

reflections

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.

planel-viewer

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.

musicvisualisation

7. Water Ripples

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

water ripple

8. Strange Attraction

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

strange-attraction

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.

cloudkick

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.

liquid particles

11. Canvas Sphere

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

canvas sphere

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.

jtenorian

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.

dynamic collage

14. iGrapher

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

igrapher

15. Tiler 3D

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

tiler-3d


About the author

With a passion for Knowledge, Smashinghub has been created to explore things like Free Resources For Designers, Photographers, Web Developers and Inspiration.

Twitter Visit author website

Subscribe to Smashing Hub


5 Comments

  1. Saifu says:

    nice post…Thanks!

  2. Beben Koben says:

    one web…with the great content…awesome…
    thanks \m/

  3. kangax says:

    For a canvas library providing object model, take a look at fabric.js.