21 Ridiculously Impressive HTML5 Canvas Experiments
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!
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Nice Tutorial! Might use some on my site, Zilla.co.nz
They are all pretty impressive, but I think No. 9 (fake floor reflections) is flash, not HTML 5 canvas.
I can’t wait to play Half Life 3 in my browser… ;)
The is indeed incredible… This certainly looks like the dawn of a new ‘era’ and the end of “that other “technology….
If by “the end of that other technology” you mean flash, I LOL at you good sir :)
Any why is that? When all of the major browsers support the video element and other stuff flash will have no place.
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
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.
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.
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.
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.
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.
@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 =)
I agree, this kind of stuff could be done with flash years ago.
This page has an interesting comparison between canvas and flash:
http://www.eleqtriq.com/2010/02/canvas-svg-flash/
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…
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.
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.
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.
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
Awesome!!!!!! wow!
Some of the examples are mind blowing…
I really like Sinous game. Really great post
Can’t wait for this to be fully supported by all the major browsers…..in about 10 years? :)
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!).
*cough* *cough* #9. Fake Floor Reflections is done in FLASH.
Would have been nice to visit these 21 pages with plugins disabled before posting.
#9. its going to be years before we can expect to realistically have effects like this production ready without the use of flash.
Yeah and number 21 seems to be JS? Hence the name “js cloth” no? yes?
All the HTML 5 Canvas effects are performed by JS. To my knowledge, it can’t work otherwise.
You have to use javascript to do things with the canvas element.
lame :( I was really hopin that was a reality. I was all excited too to see that in the line up. Perhaps someday eh?
Amazing…. need to check HTML5 canvas.
Thanks for the great article.
Nice canvas… I really love it.
this is one of my favorite : http://www.craftymind.com/factory/html5video/CanvasVideo.html
I might be wrong but… the “Fake Floor Reflections” sample is made with Flash… Not HTML5.
Always the party pooper, Monsieur Henri.
Awesome stuff. I agree though there seems to be far to much going on about HTML 5 at the moment.
Really cool to see those, thanks for sharing!
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.
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.
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.
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.
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.
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…
Thats awesome canvas, I loved the waterfall with 8 bit changes, that looks just almos real.
nice collection !
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.
nice collection….
check these out with Javascript disabled…
MIND BLOWING!
Why not just post a link to http://www.chromeexperiments.com? Did you get paid for this?
lol… that’s pretty funny.
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.
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. :)
Redonkulous….
Yea, saw that Arcade Fire’s HTML5 Demo the other day and it kicks ass man…
I love that game!
Great collection, very useful!
This HTML 5 thing is crazy… i will defiantly try these.
simply amazing
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.
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?
nice collection. am playing the Sinuous ;) thanks.
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:-).
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.
No, HTML5 isn’t a perfect solution, but it’s DAMN awesome!
HTML5 is truly fucking powerful. Future knocking at the door? Yes..
amazing, excellent
very good !
This is off-the-chain, love it. HTML5 will be a great addition in the years to come.
I’m very happy I’m on that list. My number is #18
Take a look at http://beautifl.net/ for some inspirations, what else to be HTML5-fied..
I don’t find words to describe, all what I can say is thanks for shearing.
Amazing! :)
Wow. so amazing and professional.
these are my first expriences in HTML5.
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.
That people with 12 years of flash experience get this threatened by HTML5 canvas is proof enough that it is a competitive technology ;)
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.
A full scale HTML5 with canvas application, that took surprisingly little effort to code, can be found here: http://www.anchormodeling.com/modeler
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.