10 Exceptional Examples of HTML5 Canvas and Applications

10 Exceptional Examples of HTML5 Canvas and Applications

10 1372

10 Great HTML5 Canvas demos

This is collection of most incredibly HTML5 canvas demos. Today, during browsing web I was amazed with so big amount of various html5 demonstration. And glad to share what I was able to collect. HTML5 become more, and more powerful, it even less processor-consuming than Flash. So, may not be far off such an event when the flash will fully shifted with html5?


1. FishBowl

Beautiful aquarium
microsoft

2. DeviantART muro

Great light online photo editor
deviantart

3. 3D Earth

Spinning around its axis the earth globe
peterned

4. Asteroid Belt

Asteroid belt in space
microsoft

5. Interactive Polaroids

Nice photo gallery view (looks like polaroids shots)
addyosmani

6. Canvas Cycle: True 8-bit Color Cycling with HTML5

This is most great demo, here are even set of demos – animated demonstration of various weather effects
effectgames

7. js cloth

2D image at 3D environment
que

8. CanvasMol

Three-dimensional molecular structures of various elements
alteredqualia

9. Or so they say…” by xplsv

Nice space drama
xplsv

10. 3D Model Viewer

3D viewer of different prepared objects
giuseppesicari


Conclusion

Hope that our new collection of cool html5 demos was really interesting for you. Good luck!


10 COMMENTS

  1. The fish bowl demo is used across the web as a great example of how bad html5 canvas is – it just EATS CPU and almost never works.

    I have a VERY powerful machine – and almost every demo was clocking at a minimum of 60% – doing a simple demo with nothing else – totally unacceptable.

    Everything being shown here is about as useful as breasts on a bull – seriously – flash developed papervision and there is unity3d – why would anyone hire an HTML coder to do serious 3d work ? Are you absolutely kidding yourself.

    The Deviant art demo is about 1 5th of what was done in flash almost ten years ago now – so if your point is to show how far behind the times html is you have succeeded.

    The filters are simply appalling. Flash has inbuilt pixel benders and shaders – while this has, well the best that can be said is very, very ,very poor edge finding. Simply a disaster.

    What a load of junk.

    Compare this to some of the molehill demos and try and have an unbiased day – have a look at what molehill is doing – it will blow you out of the water – full PC 3D gaming delivered online – what I saw here was just really, really sad.

    • Thank you very much for the frank answer, but I still think this is just the beginning, we do not know the final plans for Microsoft, maybe they just gradually introduce 3D technology in html? Perhaps the next step will include 3D ​​Canvas? (with its full support), that developers will not need to do emulation of 3d in 2d canvas. What about hiring a web-developer to create any serious 3d project – completely agree with you. As for me, I prefer to hire someone who have experience with creating of games (c++ or c# developer – they will able to do much more with graphic than ordinary web developers)

  2. thanks for sharing these exceptional piece of examples of html5 canvas and applications. Its really incredible collection.

  3. @Aristophreni: I believe, when Javascript was introduced in the browsers, critics must be saying things in the same line like you: “Providing interactivity in browsers in JS, Java applets can do that lot better that this. Why do we need JS for this.” Now if you look, JS has outgrown Java applets and moving forward fast.\

    I am not saying that JS will make Flash obsolete; it may do it one day or may not but it doesn’t mean that it shouldn’t support animations graphics. JS and animation algos in browsers and becoming better; Hell, Fabrice Bellard built an x86 PC emulator using JavaScript. He’s even gone so far as to install Linux kernel 2.6.20 on top of it

    I believe that this development in animation is good as it brings native competition to Flash and Silverlight and breaks Adobe’s monopoly in this field.

  4. I think it’s significant that browsers now start along this path without plug ins, yes there is a way to go, but there is not technical reason why javascript cannot compile in the browser to achieve the same effect as flash player, both actionscript (flash) and javascript are turing complete dynamic scripting languages, so it is really all down to compilation and having a secure/fast enough runtime to execute the language – if you’re taking note of adobe labs you will see them tooling up to HTML5 standards and creating tools based on Flash to output for Canvas. A strict subset of Javascript with type hinting has been developed – what do we as developers gain from this? no a couple of years there will be no more ‘we can’t use Flash as it’s not standard, we can’t use Flash because we don’t know users have the plug in… etc etc.’ and then motion graphics, on the fly bitmap rendering and highly interactive content will be part of what a JS developer can offer clients, along with traditional web design/development, not something seperated off in a ‘plug-in’ ghetto

  5. @Aristophrenia

    Man, you fired on a quite easy target really… we share the same belief here I think!
    We aren’t saying Flash is a sacred graal and I personally believe all that stuff deserves the right to be explored but all this ‘killing Flash’ trend honestly sucks. Were coders and scripting-gurus so lazy to need Jobs’ ostracism against Adobe’s Flash to explore new territories?
    As I commented in another Andrew’s post about XML and Flash {a clear sign about his point of view, Andrews shows a honest enough attitude about Flash and his thoughts about hiring game-developers clearly shows we look at these things with a similar approach… in my company I set up a whole department about game-design to bring Flash, Unity 3D and Second Life all together… Apple’s policy seriously put the whole project at risk but I won’t ever give up so if any of you is interested just get in touch!} the anathema against Flash makes no sense and puts at risks those with a serious intention to improve Flash impacts in web design nowadays.
    Why shouldn’t all we responsibly work alongside in a full-compatibility approach? This ‘war’ leaves more corpses along our path than people probably can even imagine… So sad!

    • Hi Rob,
      Mostly, it depends on your implementation. Anyway, you always can work with arrays as well as you did it before (with ordinary js arrays).

Leave a Reply