You all tweeted in to vote and today I’m sharing a whole new set of HTML5 Canvas demos that really show you just how far you can push the envelope on the <canvas> element. One of my favourite things to look at at the moment is 3D so you’ll get to play around with excellent interactive examples like the 3D Google Images Gift Box and or my 3D site Perspectives demo but you’ll also see just how useful the canvas can be for modelling real-world objects.

 

We’ve got a great new post ahead of us.

 

It’s amazing just how many applications the Canvas has opened up and I really didn’t expect to see powerful Face Detectors or Matlab-level graphing so soon in 2009 (but guess what guys..this post includes working examples for both!). The Canvas element has allowed developers to take on some of the visually inspiring things we’ve previously only been able to do with Flash and finally do it in a way that doesn’t require a third-party plugin – it’s no surprise that us geeks are really interested in seeing what it’s capable of.

 

Many of these demos have either not been released before (or haven’t been heavily publicised) so I really do hope this fresh set of examples give everyone a little inspiration for their own Canvas experiments. To give you a little perspective, the Canvas is so powerful that it only took me about a week to create an almost perfect clone of the Apple iTunes CoverFlow effect with the canvas element.  With 3D, Vector graphics and more coming to a Browser near you soon, it’s never been a better time to learn more about what you can achieve with it.

 

So, without further adieu I give you today’s list of incredibly fresh Canvas demos:

 

 

Interactive Google Images “Gift” Box

 

 

Canvas Cartoon Animation that’s as good as Flash

 

 

Canvas + Audio Burst Animation

 

 

Canvas Parallax 

 

 

Interactive 3D Canvas Perspective of any site you enter

 

 

Interactive Polaroids

 

 

JavaScript Fast Face Detector

 

 

3D Model Viewer using the Canvas Element

 

 

The Flickr Canvas SlideShow

 

 

Canvas + SoundManager Audio Player with Waveform effects

 

 

The Evolving Monster Animation 

 

 

 

 

 

   A 3D Landscape generated using the Canvas Element

 

 

Matlab-style plotting using the Canvas and GNUPlot

 

 

 

 

Share

Related posts:

1. How to create impressive animations in jQuery with .animate() I’ve been asked many times over the past month...
2. Why HTML5 is a Game Changer and what it means for you. Web Developers are commonly asked to create applications which stream...
3. An improved Javascript CoverFlow demo using Canvas and HTML5 (Firefox only)   Over the past 2 weeks I’ve done a lot...
4. 13 Incredible New JavaScript Projects From Google Labs   This post will introduce you to an excellent...
5. A re-cap on the Canvas element  I thought it might be useful to write a catchup...

Related posts brought to you by Yet Another Related Posts Plugin.