Feature
Post

Category
Code


10 Awesome HTML5 Canvas Examples

There has been a debate waging some time already about the use of Flash or HTML5 Canvas, which became pretty intense when it became obvious that Apple would not support Flash on its mobile devices. With big websites slowly implementing canvas, the constant updates from browsers(dear IE excluded) and the gaining popularity of HTML5 the debate is still ongoing.

The use of canvas still needs to take off, right now it is still in a ‘trial’ stage due to browsers limitation and lack of wide resource of code and tutorials. Canvas is in its childhood but growing up fast.

If you like animation, games and a good coding challenge check out these canvas demos and experiments to get some inspiration and learn how to code your own.

Asteroids – HTML 5 Canvas and JavaScript demo

asteroid canvas

A highly addicting game now in your browser without Flash. In my case there was no loading time or lag whatsoever. I had to make myself stop playing to keep working on this list.

Molecule Rotation

molecule canvas

If you are interested in science, medication and molecules this is one cool canvas animation. The work that must have gone into this, not only the coding but the actual data.

3D landscape on HTML5 Canvas

3dlandscape canvas

Remembers me of the matrix, the colors and flow.

HTML5 Canvas and Audio Expression

expression canvas

Try viewing it with your browser on full screen mode.

Blob

blob canvas

Right click changes the blob and colors, a nice experiment.

Colorful Tracking and Circles

tracking canvas

According to the maker this one started as a tracking experiment, this gives you an idea of what all is possible.

HTML5 Kaleidoscope Experiment

kaleidoscope canvas

The title says it all. A full screen version with auto play would be wonderful.

Visualization

visualization canvas

This one totally reminded me of when Winamp was popular, I loved the visualizations that came with it.

Browser Ball

browser ball canvas

The most simple and inventive yet, bounce the ball in between browser windows.

Mesmerizer

mesmerizer canvas

Reacts on mouse gestures and keyboard input.

These examples can be very intimidating but they show the full potential of canvas. Four your own website or web app canvas can be useful for a progress indication, a content loading spinner, etc. Like I said before the resources(books, code, tutorials) are still slim but growing fast.


  1. By Tomas posted on August 5, 2010 at 1:32 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    It seems like Flash didn’t perform well on Apple devices, but the problem is that HTML5 is even worse and it’s not solved in near future. With many different devices it become harder to do one solution regardless of technique. So question is do you want to do cool 3D, effects etc that works in 98% of browsers excluding mobiles with Flash or do buggy slow HTML5 things that doesn’t works in half of the browsers. I just tried simple HTML5 and some things are not working as expected in Iphone. HTML5 going to work perfect when you want to surf and get information, where the effects are very light, but its not rich multimedia. It’s ridicilous to think that it would replace Flash.

  2. Trackback