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
← Older Comments
  • http://www.quesucede.com/page/show/id/frontpage Brett Kromkamp

    Why Conway’s Game of Life? Well, Conway’s Game of Life is a very simple cellular automaton – the problem space is small enough to allow you to only focus on the HTML5 canvas tag while still including sufficient elements to make for both an interesting and valid learning experience.

    Check it out at: http://www.quesucede.com/public/gameoflife/index.html

    Regards,

    Brett Kromkamp

  • http://catfan.me catfan

    My site http://catfan.me also using Html5 canvas technology now, I hope you can put my canvas experiment on this page!

    PS:left click the sky to add more cloud, double click to clear up. You also can see FPS on the left top to test the performance of web browser.

    • Romero

      Stop spamming with your crappy site. Thanks.

  • thomas

    I think those are all examples I saw 5 years ago when processing came out. Actually I think they are just ports from Processing to Processing.js

  • http://www.dev-hq.co.uk/ Joe

    Very awesome!

  • Alexmosscow

    Поздравляем всех с прошедшими праздниками и дарим скидки !

  • Dinesh

    Very awesome!!! and lots of things in html5 canvas example is there and also unbelievable with canvas like flash. So i am very impressed by html5 canvas with javascript.

  • https://sites.google.com/site/canvasdraw/ John King

    It is now easier to produce canvas drawings check out https://sites.google.com/site/canvasdraw/

  • http://www.davidlindsley.com/canvastools.htm Lindsley

    I prefer the Canvas Tools project that I’m working on! See it at http://www.davidlindsley.com/canvastools.htm.

    I’m still adding features, but you can not only create shapes, but with my Canvas Font Maker, you can quickly and easily add gorgeous fonts to your canvas page.

  • http://mycodefixes.blogspot.com Ryan

    The Cloth Simulation and Blob are absolutely insane!

  • Gus

    All the people here defending flash and saying the canvas tag is nothing to get excited about, you forget one thing. Flash costs LOTS OF MONEY and you must have a proprietary plugin to run it. We are all well aware that flash can do all the above stuff. However the fact that this stuff is now possible with little more than a text editor and a modern browser and some javascript skills has sealed the fate of flash for most of its current uses. The longer time goes on the better and better the javascript libraries for html 5 will get until they can surpass flash altogether.

    • Nothing is free

      Software changes. This is also true for Flash. The Flash software of today is different from say the Flash software a couple of years ago and will be different from Flash in the future, just like any other piece of software (including HTML5).

      If software is commercial, money is coming in to pay dedicated programmers to develop the software. If software is free, it’s development depends on contributions from the community. Because nobody is getting paid not everyone will be eager to share their thousands of hours worth of work for free and it will be difficult to manage the overall development. Quality controll will also be a problem. Generally this means that free software will always lag behind commercial software.

      HTML5 does have some commercial companies behind it (like Google), but this in turn does not make it free. The investment by commercial companies is paid for in indirect ways by advertising revenue or in the sales of commercial software that outputs HTML5 animations (e.g. Adobe is working hard on outputting HTML5 instead of the traditional flash animation).

      The argument that FREE is better only applies to non-commercial developers. Since they do not make money with the software they can not afford to buy it. If you want something done professionally you pay a professional who can thus afford to buy the tools he or she needs. If you do not want to pay, you do not get professional work because their is no money to invest in tools or education or experience.

      • Noël Ströhmer

        You have a very nice chain of arguments there that bases on a few false assumptions and thus is false in the end.

        False statement one:

        Every company is only direclty investing because they expect direct revenue. Google is getting nothing out of HTML5. They are paying a lot of money and are not planning on getting any of it back in a direct way. They also sell the Nexus series of devices for almost nothing (meaning they pay a lot for the device but the price they charge only returns a little bit of it back to the company). But does that mean they are stupid or they are going bankrupt soon? Without trying to see in the future too far: No. They are not. Because they make billions out of the advertising industry. Why? Because they positioned themselves atop the online advertising market – the top they can reach in revenue is based on the number of people being online to see this ads. So they do alot to get people online, to get people to use the internet. They sell underpriced devices so people go online and Google helps the development of HTML5 so the Internet is getting easier to use, more accessible and better to develop stuff with (in a nutshell). So are they getting revenue directly out of HTML5? No, not a penny. But are they getting lots of money afterwards, around a few corners? Shure. Final and most important question: Are we profiting from Googles investment in HTML5 and web tech? Hell yeah!

        Second false statement:

        People don’t share their work because they’re greedy.

        Just dive into the Linux/Open Source community for a week, see different forums, use Linux for a while and we’ll talk again. And oh, this is not a new “web2.0″-thingy, they do this since computers exist. And I assure you, Linux is on par with every other OS to date.

        Third false assumption (it not a statement as such):

        People who are doing stuff for free are not as professional/good as people who are doing the same thing for money. Experience comes from getting money for something (really, did you even read what you just wrote up there? o_o) etc. blabla.

        That’s outright crap. Experience is earned by doing something. If I spent 20 years doing something as hobby Im pretty sure I can beat any average guy who is doing the same as a professional. Money has nothing to do in this context, you can’t get experience for money. Often people who are not professionals spend more time on things (and since time is not a big issue in projects where there is no money involved they have more time finishing it) while the professionals rush trough something (especially true in the advertising/web development world) without the love needed to create something great.

        If I want something like a repair or construction professionally done, I go to a professional, sure. But the web changed many things, and clinging to your zero-sum game might not the ultimate solution for the new digital age we all live in.

        If there are passages in this text where the grammar is too bad to get what I am actually trying to say, I am very sorry. Comment and I will try to clarify.

        Sincerest,

        Noël

  • http://www.picozu.com Alessio

    Check out Picozu at http://www.picozu.com/editor it’s pretty close to a HTML5 Adobe Photoshop clone.

  • http://fdev.eu Francesco

    I found CanvaMap, a canvas map tool which also serves as an image zoomer/navigator at
    http://blog.fdev.eu/canvamap/

  • http://www.cmikavac.net pootzko

    here is one I made based on “8. Liquid Particles” code (with authors permission of course): http://swarm.cmikavac.net/

  • http://www.miabellallc.com/html5demo/ MiaBella

    Here is an HTML5 canvas demo that displays a graphical phone/email directory:

    http://www.miabellallc.com/html5demo/

    Businesses and other organizations could incorporate this into their online or internal address books.

    • dale

      Hi, your work looks impressive. A suggestion: don’t warp the dimensions of the actual faces. Rather, literally chop the images about center point. Cool work, non the less.

      • dale

        never mind, I should have checked out the features.

  • http://www.philowen.co Phil Owen

    Nice examples. I like the physics boxes example particularly. I can see how realistic games can eventually be made in HTML5…

  • http://www.himalini.com kumar

    Thanks for Sharing collection of great Example. i like 8 Bit Color Cycle…..I can see how realistic can eventually be made in HTML5…..excellent

  • http://www.picozu.com Adan

    Check out the Picozu Editor on http://www.picozu.com for some amazing image processing in your browser. Getting close to an Adobe Photoshop clone in HTML5, isn’t it?

  • http://blog.jalcine.me/ Jacky Alcine

    ANNND I’m in love.

  • Final Count Down

    I like to program in any language. Before the days of HTML 5 I worked a lot in Flash. For its day, flash was and still is an amazing technology. As is common in life, a new kid comes on the block and everybody profess it’s the death of the old technology.

    If your really in to programming then you know the pitfalls of flash– it is a hackers paradise, first on the flash side then on the Java side, its also dependent on Java– which has its own problems. Flash is prone to crashing and requires a plug-in being available for it to work. You need to have the most current version of flash installed or else the site won’t work properly. Don’t think about connecting to a site that utilizes flash from a device other than a computer or laptop, because flash will act a donkey on it (mobile device, smart Tv, infotainment center).

    Actionscript is good but only in the context of Flash. Javascript is universal– requires no plug-in to operate, there are many libraries to choose from, lets be real we know there will be many additions to those libraries to accommodate HTML 5 functionality. Fallback can be handled way more gracefully when issues occur.

    The only people who think that statement isn’t true know nothing about system design and architecture. Don’t talk as if HTML 5 hasn’t resolved many of the issues that made Flash a viable option in the past. Of course flash isn’t going to be dropped by organizations immediately but even adobe knows its time is limited. Outside of graphics what other purpose does Flash provide? Don’t even think about saying a secure environment to operate in because it runs in its own sandbox…You don’t know what your talking about– revert back to a hackers paradise.

    Flash had its chance to be something of long standing value but failed to create the correct business model in the Mobile environment and lost what could of easily made flash based operating systems a de facto on the mobile side.

    In closing, these HTML 5 canvas examples were excellent and I see a great future for HTML 5 and particularly the canvas element. It’s only going to get better because of its use of javascript.

  • PixelCut

    Our new app, WebCode, is a vector drawing app that instantly generates HTML5 Canvas drawing code for you. It makes creating things like these much easier. http://www.webcodeapp.com

← Older Comments