21 Ridiculously Impressive HTML5 Canvas Experiments

21 Ridiculously Impressive HTML5 Canvas Experiments

on Aug 31st 2010 with 103 comments

HTML5 is the thing to talk about these day. Today, we have a collection of some ridiculously impressive HTML5 canvas-based experiments that will make you say, “Wow!” Let’s take a peek at some of the latest, cutting edge examples out there.

1. 8 Bit Color Cycle

2. Particle Letter Animation

3. Cloth Experiment

This is one of the best canvas-based experiments.

4. Particle System

This is one of my favorites — absolutely amazing!

5. Strange Attractors

This example generates beautiful fractals, like the ones generated by Apophysis. Be sure to tick the composite :) .

6. Canvas Nebula

7. Bomomo

8. Liquid Particles

9. Sinous

This is a really fun game; is it not as easy as it looks!

10. Water in HTML5

11. Blob

12. Magnetic System

13. Trail

14. Particles

15. Shattering Box Physics Simulation

This incredible example depicts real world physics in action.

16. Flower Power

Try to guess the word. :P

17. 9Elements Particle Play

This is a beautiful example which demonstrates audio and canvas in action.

18. Beauty of Maths

19. Tree

20. Cloth Simulation

21. Arcade Fire

So what do you think? Getting your own ideas for a neat canvas application? Well, now you have more than one reason to create HTML5 apps: CodeCanyon just launched an HTML5 category! Have fun!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

This author has yet to write their bio.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • http://www.zilla.co.nz/ Ash

    Nice Tutorial! Might use some on my site, Zilla.co.nz

  • Teo

    They are all pretty impressive, but I think No. 9 (fake floor reflections) is flash, not HTML 5 canvas.

  • http://www.pollenizer.com Pierre

    I can’t wait to play Half Life 3 in my browser… ;)

  • Jbcarey

    The is indeed incredible… This certainly looks like the dawn of a new ‘era’ and the end of “that other “technology….

    • # Fez Jilani

      If by “the end of that other technology” you mean flash, I LOL at you good sir :)

      • Robert

        Any why is that? When all of the major browsers support the video element and other stuff flash will have no place.

      • Tomas

        People got crazy about HTML5 when I-devices didn’t support Flash. I understand the frustration. But its so redicilous to even compare them. The result doesn’t meet up the hype. Canvas have been for a long time now, when do we see new features that works in major browsers? Have to wait years? That’s fun for a developer. Flash have 3D, realtime sound manipulation, blending/effects etc and you can expect a new Flash version soon. Mobile devices and computers are different, either a complex thing in HTML5/Flash often not working good in a mobile, so you are still need to do multiple solutions to be serious. HTML5 isn’t magic. Use the right tool for the right thing.

        Some cool Flash things
        3D http://alternativaplatform.com/en/demos/bunker/
        Doom http://www.kongregate.com/games/mike_id/doom-1
        Photoshop http://pixlr.com

      • DED

        Fez Jilani is correct, one thing people over look is that Flash is not just a web technology. It is used in television and other areas where animation is done professionally. Also, while the new canvas tag is a great addition, by it self it does almost nothing. All the examples here ( except no. 9 that used Flash) are possible because of the translation of the Processing language into javascript ( see processing.js) which is a great thing. But Flash has it’s own qualities, html5 with canvas and video support don’t replace everything Flash does or why it is often used.

    • Sergey.D.ru.iD

      Agreed.
      However, this technology needs to increase performance… some of these examples are a bit slow even on faast computers like I have, while flash can be “customized” in performance.

    • http://www.ballyhoolbog.com Andrew

      I can’t take it. These are sorta like “neat” but wake up man. Flash can do 100 times what these wimpy examples can do. Seriously, your all up in the night if you think HTML5′s “canvas” even holds a stick against the power of flash.

      Noobs. Steve Jobs has polluted all of your innocent minds. (And I’m a avid mac man)

      Comparing HTML5 to Flash is apples to oranges.

      • Barry

        This is still quite early in the life of the HTML5 canvas. Back in the early days of Flash the work being done was not that impressive. If Adobe isn’t working on a javascript rendering engine for Flash I would be surprised. They ought to be able to leverage Flash as an authoring tool and generate javascript to work on any device.

      • Rich

        Can we have some examples please?

        I agree that there are some things that flash still does better, but I think the question that should be asked is whether those increasingly small number of benefits makes using a proprietary, unsupported plugin worthwhile. I think for the vast majority of cases the answer is no. Stevie may have sped things up, but this was always going to happen.

      • Sk1ppeR

        @Barry .. flash have multiple versions and an auto updater … HTML 5 is one ! Once standardized it will stay like that for at least 10 years ! While flash will continue to improve. See that’s the bottleneck of the story. And once HTML 6 arrives there will be again browser battles, retarded users which still use internet explorer 6 (perhaps IE 7 then). Also flash is going to support peer to peer networking and cool stuff like that. Also messing up your html code with let’s say…game’s code in one…becomes pretty messy. Flash is simple 1 powerful swf file which talks with javascript perfectly through external interfaces. So i really doubt that HTML 5 is as Steve Jobs describes it. But then again you americans believe everything you hear on TV or commercials and that is why Mac and iPhone have some success in there =)

      • John

        I agree, this kind of stuff could be done with flash years ago.

      • jw

        This page has an interesting comparison between canvas and flash:

        http://www.eleqtriq.com/2010/02/canvas-svg-flash/

  • http://www.adesignstudio.net adesign

    Everybody is talking so much about HTML5 especialli on nettuts. In the last few weeks almost every second article is about HTML5. I agree it is nice..indeed. But the problem is that in the real life it is far for being ready for production beacuse of the browsers wich don’t support it. I like new technologies, I like to experiment but if I can’t use it (to make money of course) I won’t give su much attention.

    On the other hand…new technologies (HTML5,CSS3) are changing the way we develop websites and web applications. They give us a lot of new features…the possibilities for the use of them are endless..but they also increase the possibility to the things to go wrong..because of the differences between browsers.

    So I am very sceptic now for the future of HTML5…

    • http://www.freshclickmedia.com Shane

      It’s true that this is really cutting edge stuff, but I applaud that guys who put this stuff together – they’ve shown great technical skills in showing us all what can be achieved. Browser support is limited in the sense that IE in particular won’t be compatible, but I think that this sort of stuff is encouraged, since it pushes things forwards.

      • http://www.ripplenet.co.uk Tim Read: Ripplenet web design

        yes, I agree. There will be more complications for sure – but as you say things move on, and you can’t just stay in the past.

    • w1sh

      I think mobiles supporting HTML5 web-apps is enough to make a lot of people start using it right away. And as always, you can progressive enhance sites.

    • http://www.thecodebakery.com Sam

      It’s been the same for every web technology before.

      Many people were using html 4 before it was officially released, same with xhtml.

      The future for now is html5 + css3

  • http://holamiamor.tistory.com Irene

    Awesome!!!!!! wow!

  • http://twitter.com/irengba irengba

    Some of the examples are mind blowing…

  • http://www.codeforest.net/ Codeforest

    I really like Sinous game. Really great post

  • http://qbessi.com Mohammad Koubeissi

    Can’t wait for this to be fully supported by all the major browsers…..in about 10 years? :)

  • http://www.crearedesign.co.uk Steve Maggs

    Really impressive demos, I need to find out more about canvas and HTML5 in general. I disagree with adesign (above), if you build carefully (correctly you might say) then browser differences can be allowed for without fundamentally altering the experience of any user.

    There are ways of forcing older IE’s to take HYML5 and CSS3 but even if you don’t choose to go that route there is no reason that every browser must be identical, as long as the site remains usable and intuitive.

    And for demos like this, anyone using IE6 doesn’t deserve to see them (or probably want to!).

  • http://www.p01.org/releases/ Mathieu ‘p01′ Henri

    *cough* *cough* #9. Fake Floor Reflections is done in FLASH.

    Would have been nice to visit these 21 pages with plugins disabled before posting.

    • peteo

      #9. its going to be years before we can expect to realistically have effects like this production ready without the use of flash.

    • # Fez Jilani

      Yeah and number 21 seems to be JS? Hence the name “js cloth” no? yes?

      • Teo

        All the HTML 5 Canvas effects are performed by JS. To my knowledge, it can’t work otherwise.

      • Barry

        You have to use javascript to do things with the canvas element.

    • http://www.chris-mcmanus.com this dude in tacoma

      lame :( I was really hopin that was a reality. I was all excited too to see that in the line up. Perhaps someday eh?

  • http://justflak.com Stephen

    Amazing…. need to check HTML5 canvas.

    Thanks for the great article.

  • http://www.lam5.cn wison

    Nice canvas… I really love it.

  • charles
  • Jacob

    I might be wrong but… the “Fake Floor Reflections” sample is made with Flash… Not HTML5.

  • http://blog.nihilogic.dk/ Jacob Seidelin

    Always the party pooper, Monsieur Henri.

  • http://www.twentyeleven.co.uk TwentyEleven

    Awesome stuff. I agree though there seems to be far to much going on about HTML 5 at the moment.

  • http://web30textures.com/ GKL

    Really cool to see those, thanks for sharing!

  • Some Funky Dude

    I don’t think you can get the same performance from Javascript as a precompiled swf, or java applet for that matter either, but I still think it’s cool, HTML5 doesn’t have to be a “flash replacement” or anything like that, it’s just another option.

    • Barry

      I’m sure we’ll end up with browsers compiling javascript on the spot. In any case as computers get faster the performance issue will be moot.

      • http://hosting4developers.com Jonas

        What usually happens when computers get faster is that developers seize the chance to use more processor-intensive stuff. In other words, things will be just as slow in the future, but they will be more impressive.

      • DED

        Barry, javascript is not compiled, it is run through an interpreter: which is one reason it is a ‘scripting’ language. It will always be slower than a correctly coded compiled language because compiled languages are translated into machine language before being run. Languages like Java and Python use something in-between by translating the code into byte code, which ( in theory at least) is faster than directly running an interpreter. The issue with javascript’s performance is not limited to the cpu or ram of a particular computer, but also the ability of the browser running the interpreter. Flash uses the Actionscript programming language which is actually very similar to javascript as they both are derived from ECMA script.

      • http://www.anchormodeling.com Lars

        Actually, with Just-In-Time compiling and Hot Spot technology, languages like JavaScript, Java, and Python can be faster than a precompiled language. The two technologies can compile code to better suit the actual hardware you are running on, since that information is available at compile time, in comparison with a precompiled language, in which you have to compile for a target minimum hardware spec.

    • SomeFunkyDude

      interesting observation Lars, although wouldn’t the runtime environments be optimized for particular hardware also. I agree with you Barry, but it will be a few years before everyone is up to a speed where it doesn’t matter. The only long-term bottleneck I can see is having games like Crysis 2 run in a web browser, will JavaScript or a proprietary plug-in like jre or flash player outperform, but not every application needs that much power…

  • http://www.creativedogs.net Luis Lopez

    Thats awesome canvas, I loved the waterfall with 8 bit changes, that looks just almos real.

  • nice

    nice collection !

  • http://datasplash.co.uk Darren Lunn

    OMG, the Tree is just stunning, and the very first example too – how on earth do they do that!! I couldn’t do that with a paintbrush let alone a PC. Mind blowing.

  • http://nikesh.me/blog/ nikesh

    nice collection….

  • adam

    check these out with Javascript disabled…

    MIND BLOWING!

  • bill

    Why not just post a link to http://www.chromeexperiments.com? Did you get paid for this?

    • Matt

      lol… that’s pretty funny.

  • Matt

    Honestly… it’s like going from the Playstation 3 to the very first Atari. I applaud their efforts, but seriously… this only further proves that flash isn’t going anywhere anytime soon (meaning the next 20 years!).

    Here is a great example: Sensisoft or any video game site out there. It’ll be many years before html5 will achieve anything close to that.

  • http://jarodtaylor.com Jarod Taylor

    A little more than just canvas is being used here, but this is the most incredible HTML5 demo I’ve seen.

    Arcade Fire’s HTML5 Demo

    You have to view it in Chrome, and you should probably be on a computer that doesn’t suck. :)

  • http://johnwooten.info drumkeyjw

    Redonkulous….

  • http://www.benjaminonlineservices.com CSS_GURU

    Yea, saw that Arcade Fire’s HTML5 Demo the other day and it kicks ass man…

  • http://connorcrosby.me Connor Crosby

    I love that game!

  • http://inspirationfeed.com inspirationfeed

    Great collection, very useful!

  • http://www.websolpk.com imran khan

    This HTML 5 thing is crazy… i will defiantly try these.

  • http://www.designmango.com designamngo

    simply amazing

  • Anonymousee

    Ridiculously impressive, indeed. But heavily copied from http://hakim.se/experiments/.

    A remark or even removing the article wouldn’t be out of place. My 2 cents.

    • Conexion

      What are you talking about? A good portion of those link to Hakim directly. The ones that aren’t, are not made by him, and thus shouldn’t get credit. Did you not even look at them?

  • http://bhupalsapkota.com.np bhupal

    nice collection. am playing the Sinuous ;) thanks.

  • http://www.albruna.nl Martin

    Nice examples for HTML5.

    My biggest issue with the whole HTML5 thing is browser compatibillity. It’s going to be the whole IE6 nightmare all over:-(.

    But still. No holding back the future. Who would want to anyway:-).

  • http://www.damkostudios.com Derek Damko

    I see that most of the conversation on here is comparing the Canvas tag with the power of JS and Flash with the power of AS. There is the rub. With Flash you can create the graphics in an IDE and manipulate those graphics with AS or you can also draw things with pure AS. On the HTML5 side all of those graphics are drawn with pure JS. There is no graphic IDE to draw vector graphics and then manipulate them with JS. I know there is SVG but they are two different animals. So Adobe if they wanted to could make and IDE than would merge Illustrator and Dreamweaver into one and would basically compile to HTML5 with a Canvas tag. Maybe.

  • George

    No, HTML5 isn’t a perfect solution, but it’s DAMN awesome!

  • http://www.alexander-ljungstrom.com/ Alexander Ljungström

    HTML5 is truly fucking powerful. Future knocking at the door? Yes..

  • http://www.kameralarim.com güvenlik kameraları

    amazing, excellent
    very good !

  • http://www.carterdigital.com.au Carter Digital

    This is off-the-chain, love it. HTML5 will be a great addition in the years to come.

  • http://code-laboratory.com yanek1988

    I’m very happy I’m on that list. My number is #18

  • http://sys-labs.com Syscl

    Take a look at http://beautifl.net/ for some inspirations, what else to be HTML5-fied..

  • http://elaraji.co.cc Adnan

    I don’t find words to describe, all what I can say is thanks for shearing.

  • Jorich

    Amazing! :)

  • http://seee-kashanu.ir Ahmadreza

    Wow. so amazing and professional.
    these are my first expriences in HTML5.

  • aristophrenia

    Flash player 11 is well advanced with features being released – which of course includes FULL GPU accelerated 3D – along with the peer to peer networking capability we are going to see an entirely new generation of gaming which will be unmatchable in the browser on mobiles – anyone – ANYONE who thinks canvas is somehow a competitor to flash is a complete and utter MORON – no questions about it.

    I’ve been developing on the flash platform and a many others – for almost twelve years – so lets just be really clear here – trying to emulate flash with html and javascript is the stupidest, dumbest, most retarded thing I have ever, ever heard and if people are seriously considering it then the people who are going to suffer the most are end users and businesses who are going to be subjected to half arsed, obscenely priced, untestable, spaghetti code from amateurs bedrooms all over the planet.

    HTML5 canvas element will become the worst feature of the web – very, very quickly and people will curse the day it was implemented. There are far more noobs out there with access to html5 than flash which has become a highly specialised area with barriers to entry.

    Please start thinking about things beyond ridiculously STUPID comments like HTML5 will kill flash – its just moronic.

    • http://www.anchormodeling.com Lars

      That people with 12 years of flash experience get this threatened by HTML5 canvas is proof enough that it is a competitive technology ;)

  • Observer

    Many technologies strove to decouple programming languages from the operating system. This is why java has been invented and made large strides in the internet business. Funny how Sun Microsystems did not survive to witness this dream happening with HTML5. A miracle took place so all vendor bought the idea of HTML5. The future is the death of the desktop and the rise of the browser. The target is the Cloud Computing where all applications are hosted at the ISP while the browser must be ready to run those apps independent from the OS and hardware. Definitely this move is for the good of open systems like Linux. Tough luck Microsoft.

  • http://www.anchormodeling.com Lars

    A full scale HTML5 with canvas application, that took surprisingly little effort to code, can be found here: http://www.anchormodeling.com/modeler

  • http://www.tenaxtechnologies.com java developer

    The problem is that in the real life it is far for being ready for production beacuse of the browsers wich don’t support it. I like new technologies, I like to experiment but if I can’t use it (to make money of course) I won’t give su much attention.

    Indeed i like HTML5.

Newer Comments →