This impressive demo leverages the HTML5 canvas element to mimic the color cycling computer animation technique that was popular back in the 1990’s.
This is a great proof-of-concept that illustrates how you could use the HTML5 canvas element as an interactive drawing platform.
Bomomo is another great example of how you can use an HTML5 canvas element as a drawing medium.
This beautiful example renders geometric equations into 3D models.
Normal Mapped Photos
This experiment demonstrates interesting interactive lighting effects applied to images.
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.
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!
This demo shows you the smoothness of animation that can be achieved when you draw on the canvas element.
This is a proof-of-concept that illustrates how you can programmatically manipulate even videos with the use of the canvas element.
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.
This interactive experiment animates your mouse movements in a grid rendered on an HTML5 canvas element.
This 3D computer graphics animation is a simple but impressive example that illustrates how powerful the HTML5 canvas element is.
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.
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.
Get posts by email
Be the first to know when we publish a new blog post!