17 Experimental Examples of Using HTML5 Canvas

Canvas Cycle: Jungle Waterfall

HTML5 canvas demo/example/experiment: Canvas Cycle: Jungle Waterfall

This impressive demo leverages the HTML5 canvas element to mimic the color cycling computer animation technique that was popular back in the 1990’s.

Ghost Writer Art Studio

HTML5 canvas demo/example/experiment: Ghost Writer Art Studio

This is a great proof-of-concept that illustrates how you could use the HTML5 canvas element as an interactive drawing platform.

Bomomo

HTML5 canvas demo/example/experiment: Bomomo

Bomomo is another great example of how you can use an HTML5 canvas element as a drawing medium.

3D Grapher

HTML5 canvas demo/example/experiment: 3D Grapher

This beautiful example renders geometric equations into 3D models.

Remixing Reality

HTML5 canvas demo/example/experiment: Remixing Reality

This demo exhibits the power of the WebGL JavaScript API and the canvas element; it superimposes 3D objects on top of a video. This could be how augmented reality on web pages can be implemented using open source code.

Normal Mapped Photos

HTML5 canvas demo/example/experiment: Normal Mapped Photos

This experiment demonstrates interesting interactive lighting effects applied to images.

HTML5 Canvas Particle Animation Demo

HTML5 canvas demo/example/experiment: HTML5 Canvas Particle Animation Demo

This experiment has variable settings such as what text you want to animate; it’s an excellent example that shows how to programmatically animate HTML on a canvas element.

Maze

HTML5 canvas demo/example/experiment: Maze

This interesting HTML5 game is reminiscent of old 3D platform games and shows you how capable modern open source web technologies are in computer graphics animation. Beware though that there is background music, so lower your computer speaker’s volume before venturing into the maze!

Wave

This demo shows you the smoothness of animation that can be achieved when you draw on the canvas element.

Conductor

HTML5 canvas demo/example/experiment: Conductor

This interesting demo turns NY’s subway system (called MTA) into a musical string instrument. It gets the data in real-time using the MTA public API and then uses JavaScript, SVG drawn on HTML5 canvas, and the HTML5 audio element for the sounds. Learn more about the conductor project here.

Video Destruction

HTML5 canvas demo/example/experiment: Video Destruction

This is a proof-of-concept that illustrates how you can programmatically manipulate even videos with the use of the canvas element.

Zen Photo Garden

HTML5 canvas demo/example/experiment: Zen Photo Garden

This demo shows you the ray tracing computer graphics technique done entirely using JavaScript and HTML5. Learn more about this demo here.

The Cloth Simulation

HTML5 canvas demo/example/experiment: The Cloth Simulation

This interactive experiment uses the HTML5 canvas element to display the simulation of the physics of how cloth material moves. The application for this demonstration could be in 3D animation.

Mesmerizer

HTML5 canvas demo/example/experiment: Mesmerizer

This interactive experiment animates your mouse movements in a grid rendered on an HTML5 canvas element.

Canvas in 3D

HTML5 canvas demo/example/experiment: Canvas in 3D

This 3D computer graphics animation is a simple but impressive example that illustrates how powerful the HTML5 canvas element is.

Water Canvas

HTML5 canvas demo/example/experiment: Water Canvas

This is a simulation of rainwater physics done on an HTML5 canvas element. You can tweak water physics variables such as light reflection and rate of rain drops.

Interactive Typography Effects

HTML5 canvas demo/example/experiment: Interactive typography

On the demo page, hover over the characters to see animation effects made possible with the use of the canvas element and JavaScript.

What Is Your Favorite HTML5 Canvas Demo?

So there you have it: Some interesting, experimental uses of HTML5 canvas. Which one is your favorite? Discuss is it in the comments below.

  • Herrick

    These are the great collection of HTML5 arts.
    That give me a lot of idea about the Canvas programming.

    Ghost Writer Art Studio is the one I like most.

    Thank

  • Really enjoyed the zen photo garden posted above. I just tried out canvas with KineticJS and found it to be pretty intuitive, though admittedly I wasn’t trying anything like the above examples. Any comments on best practices would be more than welcome! http://wampum.io/blog/KineticJS_3.25.14

  • I see that canvas is a really powerful thing in HTML5, but it’s quite slow with video animations 🙁

  • I like the The Cloth Simulation example. This is good to see these examples after just creating the simple animation on the html5 canvas. It was the movable car : http://www.authorcode.com/draw-the-car-and-move-forward-and-backward-with-arrow-keys/

    I also found that this is easy to create the animation through using some external HTML5 canvas Scripting library..And i am searching the best.

    thanks

  • Thanks Rahul, a great collection of examples!

  • DB Conner

    Cool collection. I really liked most of them, but I guess Cloth simulation was my favorite. Addictive.

  • The Bomomo really blew my mind 🙂 !
    Excellent collection in general, thanks for sharing !

  • Some really good examples but ”Water Canvas” is really interesting.

    Thanks for the collection Rahul

  • Suresh Kappati

    Its wonderful Rahul

  • Jman

    Check this impressive use of canvas in a digital mixer control app

    http://www.soundcraft.com/ui-demo/mixer.html

  • Niklas Knaack

    Great collection. Thanks!
    I did some canvas experiments as well:

    Sound Visualizer V2:
    http://goo.gl/A4vyq7
    Distorted Sphere:
    http://goo.gl/Ea8JMc
    And more:
    http://goo.gl/WKa9DS