HTML5 Canvas Experiment


by Sebastian Deutsch on August 3rd, 2009

html5 canvas experiment

Click here to launch the experiment! (beware: sophisticated browser needed)

HTML5 is getting a lot of love lately. With the arrival of FireFox 3.5, Safari 4 and the new betas of Google Chrome and Opera, browsers support some great new features including canvas and the new audio/video tags. Most interesting: modern mobile devices like the iPhone or Android-based phones also support new standards in favor of Flash. The future looks bright for HTML5.

Time for us to play with this technology. We’ve created a little experiment which loads 100 tweets related to HTML5 and displays them using a javascript-based particle engine. Each particle represents a tweet – click on one of them and it’ll appear on the screen.

The original particle engine was ported from a Flex/AS3 project that we’ve created to javascript. We’re using processing.js for particle rendering on canvas which is a very useful graphics library created by John Resig. The music will only be played if the browser supports the audio tag. To detect if the audio or canvas feature is present we use the awesome modernizr library. We could have used a fallback solution like playing the sound via Flash. But this experiment is about HTML5 – and who needs Flash anyway?

Big thanks to spokenlounge.com for supporting us and for providing the mp3 track.

If you want to dive into further ressources, then try:

- HTML5Doctor, great ressource about everything HTML5
- Official Mozilla Canvas Tutorial
- Carsonified linklist about HTML5

chrome-experiment-badge processing-js-badge

290 comments
  1. it’s impressive to see what is possible with canvas and some javascript.. going to try that myself

  2. [...] diesem Experiment werden 100 Tweets über das Thema HTML5 gesammelt und mit dem <canvas> Element visualisiert. [...]

  3. This is absolutely awesome!

  4. Wow guys, that is really nice work. great music too.

  5. Very, very nice. Mesmerizing, even.

  6. Wow, extremely cool! And quite unique!

  7. [...] comment on their cool experiment at their blog: HTML5 Canvas Experiment. « open video codecs discussion at [...]

  8. Nice and visually beautiful example. Yet this example shows that HTML5 is not a bit of threat for advanced Flash/ActionScript development. Seeing the performance is kind of bad it might be useful for smaller and simpler tasks but when performance is required or matters, ActionScript will win.

    Still nice!

  9. Amazing!

  10. [...] who are totally awesome btw., released an impressive HTML5 Canvas demo [...]

  11. [...] 9 elements has released a beautiful experiments using the almost the same technologies: canvas, html5, [...]

  12. Days of Flash are over…

  13. looks nice!

    doesn’t work in google chrome though?

  14. Fantastic example using HTML5 and javascript.

    I also enjoyed the laugh of reading the comment in the javascript file for old non-supporting browsers: “redirect the old bitches”. LOL!

  15. “…and who needs Flash anyway?”

    Apparently you do, at least on the front page.

  16. [...] 9elements: Time for us to play with this technology. We’ve created a litttle experiment which loads 100 tweets related to HTML5 and displays them using a javascript-based particle engine. Each particle represents a tweet – click on one of them and it’ll appear on the screen. [...]

  17. Sebastian Deutsch August 4, 2009 at 8:12 pm

    Damn got me – But a little provocation is a must ;-)

  18. John Drinkwater August 4, 2009 at 10:02 pm

    Wtf doesn’t it work if I don’t allow twitter.com in NoScript? big case of fail…

  19. Robert O'Callahan August 4, 2009 at 10:29 pm

    if ($.browser.mozilla == true) {
    $(‘#audio’).attr(‘src’, ‘thankyou.ogg’);
    } else {
    $(‘#audio’).attr(‘src’, ‘thankyou.mp3′);
    }

    Please don’t do this. Use canPlayType instead.

  20. Robert O'Callahan August 4, 2009 at 10:30 pm

    Awesome demo though!

    Dexter: performance is pretty good over here in FF Mac trunk … even in a debug build, which is 2-3x slower than normal.

  21. Fantastic. Runs faster than I would expect Flash to, as well! (Opera 9.64/Mac)

    Any chance we could see a screensaver based on this? Please? I’m willing to give up interaction.

    It’s possible to do so, I’m not sure how, though. Twistori does it.

    • @Robert: Thx for the hint, we’ll look into it!

      @Alan: Good idea. A simple webkit view with the code form our experiment should do it. If there’s going to be a screensaver you’ll hear about it on this blog :)

  22. [...] HTML5 Canvas and Audio Experiment | 解説 [...]

  23. Chris Phillips August 5, 2009 at 4:58 am

    Just thought you might like to know that it works on my Palm Pre (which I’m on now).

  24. Robert O’Callahan: a single instance runs smooth, even two are not much of a problem but then it starts to slow down like hell. Just open the example serval times at once and you’ll see.

  25. [...] HTML5 Canvas Experiment « IO 9elements9elements.com [...]

  26. An ‘interesting’ experience on Android, but such potential!

  27. This was incredibly awesome. Thanks for sharing! Well done..

  28. Really stunning. It’ll kick Adobes butt :P

  29. Beautiful! – That’s Adobes end…

  30. [...] 9 Elements [...]

  31. Beautiful.

    Just to be clear — is the vis triggered by the audio? It seems so, but I’ve yet to see the audio tag used for vis input, jprocessing or otherwise.

    Cheers!

  32. Sebastian Deutsch August 5, 2009 at 7:53 pm

    @Rob Lord: the audio trigger is done through a preprocessed json array – so no rocketscience here ;-)

  33. [...] 作者網站: http://9elements.com/io/?p=153 [...]

  34. [...] The guys at 9elements created a stunning little experiment which loads 100 tweets related to HTML5 and displays them using a javascript-based particle engine. Each particle represents a tweet – click on one of them and it’ll appear on the screen. You can see it in action or read more about it in their blog. [...]

  35. [...] To read 9Elements’ blog post about it, click here. [...]

  36. Yes this is cute, but if you want to impress us, do something that only canvas can do. This this could be accomplished with ordinary DHTML and few transparent images of circles.

  37. [...] vizualisation demos/toys in HTML 5 & Javascript, but haven’t got round to it yet.  These guys have.  Very [...]

  38. Hey you should submit this to ChromeExperiments.com — they feature experiments like this.

  39. Not even HTML 5 can beat the Great Fire Wall of China…..twitter is banned. Any more experiments please?

  40. [...] Twitter particle systems using HTML5 [...]

  41. Awesome, even works in my iPhone simulator! Don’t think the audio works though! Same for the Palm Pre emulator! Webkit to the rescue!

  42. Works even in firefox 3.0.11!

  43. It also works great with Opera :-) Nice

  44. rofl! html5 is hard fail.

    every so called “web developer” should learn a proper programming language and stop playing with toys.

  45. Nice! though I feel you should credit processing to it’s origins (Ben Fry and Casey Reas) as well as the John Resign port you are using.

    processing.org

    No disrespect to Mr Resig as it’s inspired work.

  46. Works PERFECTLY in Opera as well! I don’t know why all major online articles always forget Opera – The actual true web browser innovator!

  47. Guys don’t forget to include opera in the “oh noez – please get yourself a sophisticated browser like FireFox 3.5, Safari or Chrome ” line

  48. Takes 50% or more of both my CPU cores @ my Core2Duo setup. So it’s about as bad as Flash. (Firefox 3.5 @ Linux)

  49. It looks v nice.

    However, 75% cpu utilisation, (os x, 2.66ghz cpu) is a little much.

  50. Works great in Opera. (the innovator of HTML5 Canvas).

    Opera does, everyone else follows…

  51. The song is the best part :D

  52. [...] Go here to see the original: HTML5 Canvas Experiment « IO 9elements [...]

  53. It smokes in the new Chrome beta.

  54. uhm, apple created the canvas tag not opera.

  55. Ok, This don’t work on Internet Explorer. I don’t like it too much, but, this browser is used por too much people.
    I don’t know what can I thinck???

  56. You could think perhaps that IE is shite?

  57. It’s like thinking “the sky is blue”

  58. [...] kan du kolla in det hela här. Vill du läsa mer om projektet så hoppa vidare på länken nedan. 9elements.com Läs vidare och kommentera: webb.feber.se/art/162268/en-forsta-titt-pa-html5/ —– Detta är en [...]

  59. Really, really fucking cool. However, let me know in about 10 years when our companies will finally let us use this technology in my websites. :P

  60. “Works great in Opera. (the innovator of HTML5 Canvas).
    Opera does, everyone else follows…”

    God I freaking HATE opera users, go remove the stick kthxbai.

  61. I see…so, rather than using animated SVG, they came up with this thing called canvas. You know the nicest thing about standards is that everyone can invent their own.

  62. unfortunatly twitter is banned in china, so the example just hangs..

  63. Well, I don’t know if IE is a shite or not, but I only know that IE is used for many people, and when I make a web solutions I need to think in all enviroments not only Opera.

  64. Sebastian Deutsch August 6, 2009 at 2:39 pm

    @Alan Knowles: We will release another visualization which is not twitter based in the next weeks… so probably you can view it in china. Stay tuned.

  65. 45% CPU under Quad G5 8GB (IBM PPC970), Safari latest, OS X Leopard 10.5.8 and nvidia 6600.

    Impressive.

  66. 10-13% CPU
    firefox 3.5.2
    Win7RC
    i7 920
    6GB RAM

  67. U Folks musta done the Brilliant WeFeelFine.org ! still one o thee c0olest things I’ve seen on the Web + it’s been out over 2 Years!! ;))

  68. My opinion (from a developer, and not a designer), is that these kind of works should be made with technology already existing on the market, like flash, silverlight, and many other. Keep HTML as markup language, javascript as NON-MANDATORY addon in our website, should be the way…where is the W3C in this?
    But thanks for the post, it must be known…
    Jef

  69. Sebastian Deutsch August 6, 2009 at 3:46 pm

    @Jef: If HTML and Javascript would have worked from the beginning, we would not have technologies like Flash and Silverlight… though it will still take a while till HTML5 and CSS3 is so widely adopted that we can use it “in production”.

  70. Great demonstration and reveals how functional canvas is. I’d much rather develop using open standards than proprietary technologies like Flash and Silverlight. Of course ultimately I’d rather see SVG used and that way existing SVG editors can be leveraged (Inkscape) for the base graphics and then animated from there. But I’ll take what I can get. Great job!

  71. Opera 10 Beta 2: Your browser does not support the audio element.

  72. @foobar : If you hate opera users then you definitely hate opera.. So why are you using Firefox which copies Opera’s innovations you hypocrite !!!! ????
    Mozilla foundation and Firefox are such Losers !!

  73. cant see…

    twitter is down =/

  74. Let’s hope we’re not causing the DDoS attack on Twitter… ;-)

  75. music and 5-second screen updates on my 1.6Ghz Atom netbook, Fedora 11, Firefox 3.5.

  76. [...] geht’s weiter: http://9elements.com/io/?p=153 Web [...]

  77. “Most interesting: modern mobile devices like the iPhone or Android-based phones also support new standards in favor of Flash. ”
    I just get ‘Loading’ on my iPhone 3GS w/OS3.01
    :(

  78. Amazing stuff. What’s the song?

  79. This is exactly what the browser needs, to be able to create very interaactive and fluid apps and UI’s.

    Not to mention the game publishing market can now create Direct X style games, (with more JS and HTML5 optimiztions. )

    Does anyone have to wonder WHY Adobe (flash) and Microsoft (IE) will NEVER support this? It is in direct competition with how the Internet could take over your desktop, therefore allow MAC OS X and LINUX to be just as viable as Microsoft Windows.

    IF HTML5 and all this were to standardize.

    The only way to win, is to just have people use the many browser alternatives, if they wish to use their product on CANVAS…that simple, as most people have firefox install anyways, saferi and opera as well…

    So… amazing stuff… it was already amazing what people were doing with strait up slow ass Javascript, (like that japanize mario game ) but now things are at a whole new level.

  80. Anybody here been in web development long enough to remember VRML??? Whatever happened to that??? There have been a few other “cool” technologies that were obviously not “cool” enough to gain widespread adoption as predicted. Whatever happend to XML changing the face of the internet, or replacing databases back in the late 90s??? XHTML? Where is it today, other than for a few anal developers.

    I think it’s just another short-lived obsession by a group of people soo tiny it wont even register a blip on the internet.

    At the CPU loads I’m seeing… c’mon guys. This shyt will not be running on mobile devices anytime soon. Sounds like foolish optimism. Flash/Silverlight will do it way more efficiently. My CPU load spiked at 60%, which is ridiculous for any web browsing what-so-ever.

    It’s cool… sure… but I think that’s pretty much it… an experiment for those who have the time to bother.

  81. [...] Your browser does not support the audio element. blog » [...]

  82. [...] Your browser does not support the audio element. blog » [...]

  83. This is great. Favorite part is that all of this is working on FreeBSD. Can’t view flash without using linux libraries and it’s often extremely buggy so I haven’t bothered in some time. HTML5 canvas is the 13th step.

  84. Song?

  85. Quit crying OSX and windows users:

    1) IE sucks, but they sooner or later will support this and theyll suck a little less.

    2) In Linux, this demo runs flawless and with much, much less CPU utilization than with flash.

  86. @shawn:

    SVG was not designed for animations of this scale. SVG elements are DOM nodes in a browser (same with VML), and if you know anything about writing fast, flashy web interfaces, you’d know that DOM nodes are slow. Very slow.

    Canvas is (or can be implemented as) an accelerated drawing surface; a completely different beast, and blows SVG out of the water for things like this. I can’t wait until IE dies so I can use it for nearly everything. This is much more like writing a 2D game using DirectDraw, which is good, because crippling your code to deal with DOM elements (for something like this) sucks. (3D isn’t far off either…)

    Oh, and Canvas is a standard; the big 4 browsers support it nearly identically. What else do you want?!

    @Brian:

    Everyone and their mother uses some form of transitional XHTML. If you don’t, you need to be drawn and quartered. VRML (which was the VIRTUAL REALITY one, you probably meant to say VML, vector markup language) died because it was slow, useless, and IE only. XML *has* changed the face of the internet. When’s that last time you hit a webservice that didn’t spit XML back at you? Have you written anything of value in the past 10 years dude? I don’t remember anyone seriously suggesting that XML would replace the relational database.

    Regarding CPU loads, this is the first pass at implementation of this in browsers. It’s not far-fetched to imagine that in a few years a Canvas surface will be accelerated by OpenGL / DirectX, and then it will be on par with Flash and Silverlight performance, if not utterly decimating them.

    This is the future, be prepared!

    P.S. 10 years ago “AJAX” was an experiment for those with time to bother, and look where it is now…

  87. wow, that’s really cool. no need for all these plugins.

    anybody know the name of the artist/song?

  88. @wayne: It’s “Thank You” from http://www.spokenlounge.com/wp-content/themes/qiport2008/player.php

    @thrashaholic: I totally agree! However, I’d also like to see O3D as part of future browser implementations.

  89. Animation works in Fx3.5, Opera 10 Beta 2, Safari 4, and Chrome 3 Beta. For some reason, it doesn’t resize to fit the window in the latter three browsers though.

    The audio works in 3 of the 4 with Opera left in the cold.

    Nothing works in WIE8.

    The Blog link in the corner disappears if a minimum font size is specified in Firefox; I have 18 pixels here and can’t see it.

  90. Seams pretty nice..

    who needs Flash anyway? you forgot to say and IE

    It would be great if someone make a .pdf with some samples of coding and post it on a torrent site with all the feature how-tos and other important info about html5.
    Hope they integrate this into some CMS like Joomla.

  91. [...] of Processing onto the web (no more applets!). There are some exciting things going on, such as this recent one that visualizes Twitter [...]

  92. Wow, Firefox crawled on that but Opera just ran fine, it didnt even slow down utube vids in other opera windows, and Opera didnt eat my CPU… So this is a demo for Opera?

  93. After having done a lot of research on HTML5, I can offer some of what I learned about canvas and the future of HTML5. Canvas offers a 2D graphics API that is a lot like GDI, which makes it a good choice for “splashy transient graphics”, this is because instead of having the overhead of DOM elements, you are simply drawing into a 2D surface. As long as you have a fast javascript engine, backed by hardware accelerated graphics, this can be done in a performant way. But as far as using canvas for interactive UI, there are a LOT of basics missing. How do you detect that someone clicked on something in a canvas? You have to do the hit testing yourself. How do you layout complex UI widgets? You have to measure everything yourself and position everything yourself. The list goes on and on. Lack of programmatic accessibility. Lack of screen-reader support. Add all this stuff and you’re back to having a heavy-weight piece of technology. That said, as long as all you’re doing is drawing graphics and don’t need UI type interactivity, canvas is great.

  94. On the topic of HTML5, I do see a future for it on the web, although it will take a good hunk of time before we see it widely used. This is because the folks who are producing enterprise software for the web are faced with having to support all the popular browsers out there. They will not get anywhere near a new standard until it is implemented correctly and consistently across all the major browsers, including the one everyone loves to hate (IE). That said, I see the web eventually moving to HTML5 as the spec solidifies and all the browsers support it (my guess, between 5-10 years).

    The other thing I’d like to say about HTML5 is that I do not see it “taking over the desktop”. If you go read the spec carefully you will see it’s still HTML, folks. OK they’ve proposed *some* great new features and there is a lot of buzz out there about them enabling web-apps to take the place of native apps (local storage for instance). But these features fall way short of providing the kind of platform you see natively on the Mac or on Windows. Apple and MSFT will likely both have their desktops running on propietary systems for a long time. I just don’t see enough in HTML5 to make me think I could build a real operating system on top of this standard.

  95. Oh well, let’s see. http://careaboutart.net/flash_html5/html5.jpg
    Pretty much of a performance killer for just 100 particles moving around, isn’t it?

  96. [...] Impressive HTML5 demo – http://9elements.com/io/?p=153 [...]

  97. Someday examples like this will be abstracted away from HTML and only be xstl markup. Thats when i’ll join the bandwagon.

  98. [...] så jævlig herlig når man ramler over sider som dette. For å forklare kort er har designstudioet 9elements laget et lite eksperiment med kun html5, css og javascript, resultatet viser 100 forskjellige [...]

  99. [...] HTML5 Canvas Experiment [...]

  100. “A flash dev”…a programmatic drawing surface presupposes a programming language. You’ll never join the bandwagon if you’re waiting for XSLT to accomplish this.

  101. It’s too bad this verbage is used for browsers that don’t support HTML5: “oh noez – please get yourself a sophisticated browser.” It’s off-putting rather than inviting…

    Additionally, it’s too bad the demonstration only shows the simplest particle system…it seems a sophisticated system might show slightly more. Finally, why limit your canvase size? This page looks rather silly in full-screen mode at 2560×1600.

    Finally, see what I mean about off-putting? The second paragraph in my comment really sux0rz.

  102. [...] HTML5 Canvas Experiment [...]

  103. [...] Blog entry about it This entry was posted in Audio, Visual | Bookmark the permalink. Post a comment or leave a trackback: Trackback URL. | Edit « Dirty, Dirty Major Lazer Video [...]

  104. Oh. Your. God.
    That’s some funky stuff.

  105. [...] 9elements laat in een spectaulaire demo zien wat moderne browsers, zoals Firefox 3.5 en Safari 4, op dit moment aan bewegend beeld en geluid aan kunnen zonder gebruik te maken van flash. Ook Google Chrome en Opera recente Beta’s gaan HTML5 ondersteunen. Als je verslingerd bent aan Internet Explorer dan moet je nog wel even geduld hebben of overstappen op een echte browser. HTML5 gaat visueel veel betekenen voor internet users en producers. * demo met speakers aan! AKPC_IDS += "1426,";Popularity: unranked [?] 0 keer bekeken Internet Technologie, headrotator, rotator Klik hier om je antwoord te annuleren. [...]

  106. Very cool. Shame it’s going to take years before people the world over are on modern browsers. My clients still use IE6!!!

  107. This demo doesn’t work in AppleWebKit/532.0 (KHTML, like Gecko) Chrome/3.0.198.0 for some reason. It’s just stuck at the Loading part.

  108. oi edurdo e bjs xauuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu

  109. add bjs

  110. Don’t get me wrong, I love that this can be done with open standards as opposed to Flash, but isn’t one of the big complaints against Flash also the processing overhead (CPU usage spikes)? Viewing the demo raises the CPU usage on my Pentium Dual-Core proc to around 50%. Usage drops to around 25-35% when I switched to another tab in FF3.5.1, but spikes to about 80% when I switch back to the demo tab.

    Is this mostly because of complexity in the particle rendering?

  111. Amazing, i just put this post on my blog, waiting for another experiment :D

  112. [...] スゲー。 HTML5 Canvas and Audio Experiment 解説ページ 最初本当にFlashかとも思ったけれど、 [...]

  113. [...] The browser is looking more and more like a plugin-free game development platform every day. Mozilla, Opera and Google announced at SIGGRAPH that they would be implementing WebGL in their browsers. We were also dazzled by what can be done with HTML5’s canvas element in this demo. [...]

  114. [...] Just took a peak at the new HTML5 demo from 9elements… Very Cool! http://9elements.com/io/?p=153 # AKPC_IDS += "643,"; SHARETHIS.addEntry({ title: "Weekly Twitter Updates: 2009-08-09", url: [...]

  115. [...] résultat concret ? 9elements réalise par exemple ce système d’affichage qui permet de visualiser 100 tweets récents [...]

  116. ‘This page looks rather silly in full-screen mode at 2560×1600.’

    lol, don’t most?

  117. Awesome!!1 But what about licence type?

  118. [...] JavaScript   Muy interesante experimento con HTML5 realizado por el estudio alemán IO 9elements que experimenta con el elemento Canvas utilizando el javascript processing.js para mostrar una [...]

  119. Jerk post is a jerk. Just because of you I’m going to recommend IE 5.5 to as many people as possible.

  120. “We’ve created a litttle experiment”

    With all this “sophisticated” technology, maybe you can work on a spell checker next…

  121. [...] HTML5 Canvas Experiment – Perhaps good for comparing different Javascript engines. It chokes on Firefox 3.5 on my Atom 330, but works well on 3.6. [...]

  122. Wow this was really impressive. I run a site that has the latest new for chrome and chrome os. I sure do like finding stuff this innovative to add to my site. Thanks a lot!

  123. doesn’t work on 3.0.197.11 . Please lemme know if there is something else needed.

  124. [...] HTML5 Canvas实验 [...]

  125. どうやったらこんなことできるの?

  126. [...] es ist “nur” HTML. Allerdings HTML5. Noch ist HTML5 offiziell nicht draußen. Aber im HTML5 Canvas Experiment, bei dem 100 Tweets über das Thema HTML5 gesammelt und mit dem canvas-Element visualisiert [...]

  127. [...] Aber: es ist “nur” HTML. Allerdings HTML5. Noch ist HTML5 offiziell nicht draußen. Aber im HTML5 Canvas Experiment, bei dem 100 Tweets über das Thema HTML5 gesammelt und mit dem canvas-Element visualisiert [...]

  128. Impressive! To me it looks/sounds like the graphics is synchronized with the audio. How is this achieved? Is it based on some feature of HTML5?

  129. Sebastian Deutsch August 26, 2009 at 8:46 pm

    No… sadly there is no audio feature (yet)… The audiodata is preprocessed and saved as a JSON array.

  130. [...] Für alle, die das letzte Browser-Update verpasst haben gibts hier einen hübschen Screenchot. [...]

  131. [...] 9Elements-Artikel. [...]

  132. Really impressive stuff – to be able to do this kind of stuff on mobile browsers is super sick. Keep up the great examples!

  133. [...] HTML 5 Canvas Example [...]

  134. Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.

  135. Вы ошибаетесь. Могу это доказать.

  136. need to configure java script . enable exporer settings

  137. [...] @mollydotcom: Awesome HTML5 <canvas> and <audio> experiment, http://9elements.com/io/?p=153 to read about it and see the demo. Yummy! [...]

  138. Оно и впрямь не низкое

  139. i’m running on xp machine here and the latest Firefox.
    running the demo seems like taking up a lot of resources.
    anyone experience the same ?

  140. It looks good, but for what it is, the performance and hardware required is pretty ridiculous. I don’t think Adobe has anything to be scared of just yet.

  141. Nice work!

    Could you chuck in this:

    It will (hopefully) make it work in IE 6, 7 and 8 if the browser has the new Chrome Frame plugin (http://code.google.com/chrome/chromeframe/).

  142. Damn it stripped my code.

    Just go to the Chrome Frame website. It explains everything :)

  143. love it! want it. can i have it?

  144. gr8 ppl…this is wy they say its as good as it gets

  145. Can you guys guide me to get a screenshot of the view port using drawWindow method of canvas/context for webpages with flash contents? I can get the screenshot nicely, but if there is any flash/embedded contents, they are missed from the screenshot :-(

    Any help will be highly appreciated!

    Thanks in advance.

  146. VERY COOL!

    :D

    digitis.com.br

  147. This isn’t working in IE6. Can you fix that, please?

    (he he, just kidding.)

  148. Ich finds total schwul, daß der Internet explorer nicht unterstützt wird. Wen interessiert schon so eine website?

  149. [...] HTML5 Canvas实验 [...]

  150. [...] you are not convinced check 9elements experiment of canvas, just [...]

  151. wonderful !!!!!!!!! I can see with mac broswer safari no Firefox/3.0.14

  152. ABSOLUTELY GREAT!!

    Thanks..

  153. [...] HTML 5 Canvas Experiment [...]

  154. mmm audio won’t work for me, it starts, then stops, then flickers, then continues but with a lot of interruction…
    Using FF 3.5.5

  155. [...] a good dissertation subject, but I want a good project to do as well. Creating something like the canvas experiment by 9elements would be amazing, but I think that wouldn’t be feasible in the time-frame I have, and I would [...]

  156. can i have it?

  157. Beautiful.

    My only criticism, not related to HTML5: when I’m following links from many of the random tweets, it’s frustrating to not see the long URLs.

    I tried TinyURL Decoder http://userscripts.org/scripts/show/40582 but it seems ineffective with this experiment.

  158. Absolutely beautiful.

    Stunning implementation of a sexy technology.

  159. The interface screams for a touch screen like the iPhone. Too bad mobile safari can’t render this project :-/

  160. [...] HTML5 Canvas Experiment « IO 9elements Great look at some new HTML5 features in action (tags: html5 canvas javascript html programming jquery processing audio) [...]

  161. [...] I’ve been playing around with HTML5 and Canvases. Turning out the be pretty sweet. Take a look at Chrome Experiments and IO 9 Elements. [...]

  162. Hey guys, great experiment! I’m wondering what is the licensing on this code? Am I allowed to re-use it? Pls, email answer. Thanks!

  163. [...] : "http%3A%2F%2Fcatchexceptions.wordpress.com%2F2009%2F12%2F10%2Fhtml5-canvas-experiment%2F" } HTML5 Canvas [...]

  164. Nice, but it needs a mute button.

  165. [...] HTML5 topic is already beautifully hyped in the web and we have, for a small part, contributed to this hype [...]

  166. [...] 2. Flash-like Demo: 9elements created a project that resembles a flash application but encompasses a variety of HTML 5-related tools. For more information on the experiment, check out the company’s blog post. [...]

  167. Great demo, I love it. Can you make a post about how to create such an amazing html5 coded site?

  168. [...] 2. Flash-like Demo: 9elements created a project that resembles a flash application but encompasses a variety of HTML 5-related tools. For more information on the experiment, check out the company’s blog post. [...]

  169. Awesome!

    I like HTML 5 !

  170. [...] 2. Flash-like Demo: 9elements created a project that resembles a flash application but encompasses a variety of HTML 5-related tools. For more information on the experiment, check out the company’s blog post. [...]

  171. All these ‘heads’ talking about “death to flash” , “days of flash are over”… Cretins!! Can anyone tell me what you can do in HTML5 that you can’t do in flash? You can do stuff like this in flash 5, years ago. Yeah, sure I will be experimenting with html5, looks great but hey, don’t diss the flash, man, don’t diss the flash!! Flash Rule!!!

  172. I love html5 ……….. Awesom …….

  173. It is not working on iPhone’s Safari browser, though it supports HTML 5.

  174. [...] 2. Flash-like Demo: 9elements created a project that resembles a flash application but encompasses a variety of HTML 5-related tools. For more information on the experiment, check out the company’s blog post. [...]

  175. Loving it!

  176. hi, impressive but only the sound has to deal with html5, am i wrong ?
    I have 2 questions:

    var canPlayType = $(‘#audio’)[0].canPlayType(“audio/ogg”);

    if your ‘#audio’ is really an id then unique, why using [0], same remarq with

    $(‘#audio’).get(0).play();

    unless if this new audio tag enable a new table to generate the position of the sound ?
    Second question:
    is this mute button something as easy as:

    $(‘#mut’).click(function(){ $(‘#audio’).stop();})

  177. Nice job! Beautiful and entertaining experience. html5 rocks.

  178. I find the Flash-hate pathetic… but the experiment is cool regardless. It’s not HTML vs Flash, never was, never will be. It’s HTML + Flash + Javascript + PHP + any and all tools that kickass.

  179. The demo is brilliant, and HTML5 definitely seems to be great competition for Flash. All we need now is a bunch of evangelists to write tutorials on how to make stuff like this!

    I wonder if this will work as efficiently in the mobile browser. Does anyone know?

  180. That’s misleading…. “modern mobile devices like the iPhone or Android-based phones also support new standards in favor of Flash.”

    Mobile device manufacturers are working with Adobe to integrate Flash Player 10.1: http://www.openscreenproject.org/

    Also HTML 5 has limited browser support, lacking backwards compatibility.

    It’s stupid to invent a HTML5 vs Flash war. Developers will continue to use both where it makes sense, and better HTML is better for everyone, just like better Flash is better for everyone.

  181. Congrats, you made… something that a flash could already in 2000?
    And my CPU went up to 60% (Dual core 3ghz) FF 3.6

    I’m not that easily impressed. So if you make this site http://www.adidas.com/teamgeist/ (CPU use 50%)
    then I’m impressed!

  182. @leef you are right, it’s not Flash vs HTML5, that statement was just to heat up the discussion ;)
    HTML5 will not replace Flash (see our latest post), simply because these technologies do not necessarily compete.

  183. So why all the Flash hate?
    Just looking through some Javascript/canvas examples, I’m seeing loosy-goosy scripting that is not strongly typed, limited organization and pseudo-OOP. Actionscript 3 is a far superior language to develop in. Yes it has a dependency on Flash Player, but so what? JQuery has a dependency on a Library, HTML5 has a dependency on Browser support. ‘Open source’ is only ever as good as the platform it’s built for.
    Don’t get me wrong I like what I’m seeing, this is a step in the right direction, but why all the Flash hate?
    Is it all the blue Legos? Who are all these people that don’t like Lego? Any good Flash developer should know that you need to support HTML-only viewers as well in some way. It is not Adobe’s fault that Apple represents this missing content with a blue block. Why all the hate?
    Flash can do a lot of things a Browser just isn’t designed to do at runtime. A compiled SWF is optimized to bear this load.
    I think it is a mistake to get on this bandwagon. This is not a revolution yet. I’m seeing some clever canvas work, but it’s not as clever as some of the Flash work from 2004. I mean, we can all go back to 2004 and write crude javascript if we want, but open source or not, it’s still bad code. Think this through.

  184. [...] HTML5 Canvas Experiment « IO 9elements (tags: cool web web2.0 inspiration javascript visualization programming audio jquery twitter html5) [...]

  185. this is great, i need to develop web coding to these direction soon ..

  186. [...] – if a solution doesn’t exist then chances are a skilled developer can make it for himself. HTML 5 Canvas is super-sexy, but until there are tools to make it easier for the bogged down developer then Flash will be a [...]

  187. HTML5 will never be like flash, “how need flash anyway”?

    We all !

    did u see your processor and memory use? did u compare width your as3 aplication???

    get real!

    html5, it´s inferior that FP5, and we are on 10!

    Its go back in time

  188. “who needs Flash anyway?” all the users that don’t have browsers which support the Canvas and Audio or Video Tags. Here are other easy ones: full-screen video; some of the code you use was ported from Open Source AS3 libraries… I can go on for days.

    I found concern in solution providers, like developers, discounting time tested and ubiquitous technologies like Flash. It’s an easy target, short sighted and borderline stupid.

    I am very excited about HTML5 and it’s new features. It’s going to help fill the gap and offer a wider choice of technologies, which is always a good thing. But keep in mind HTML is just playing catch-up. Leaving technologies like Flash and the countless Flash designers and developers to lead the way as they have for the past 10 years.

    Don’t let cheap shot comments like “who needs Flash anyway?” tarnish the AMAZING work you guys produce.

  189. This is amazing!
    Thanks for doing this!

  190. Such a great work… filled my eyes, seriously…

    Yeap, HTML5 is a breakthrough…
    But (and this comes from some guy ho really avoid flash use) wouldn’t be user-friendlier to let the whole canvas thingy to flash?

    Come on, all this hate upon flash comes from Iphone users??? It’s a PHONE for crying out loud… And a really bad one… I use to be a great Apple user and fan, but the past 6 years really got me out-of-there… It’s not about doing the best anymore, but about doing the louder ruckus for going hype…

    Wouldn’t be great if developers spent more time developing something new that flash doesn’t do better and lighter?

    Again, this is some awsome work, never ment to say it otherwise, I just don’t get why people ask “how high? ” when Steve says “Jump!”

  191. [...] accomplished with Flash, it will also replace Flash as a means to produce dynamic content. The HTML 5 Canvas Experiment uses pure HTML 5 and Javascript to produce an animated, dynamic web page that’s rendered [...]

  192. [...] informatie over hoe ze dit nou gedaan hebben vind je op 9elements.com/io – voor degenen die er wat meer vanaf (willen) weten. Vergeet niet, er is dus geen Flash [...]

  193. [...] Check out the article and example here [...]

  194. Very interesting article about HTML5, thanks!

  195. [...] HTML5 Canvas Experiment « IO 9elements. By mgartrel, February 9th, 2010 | Category: Advertising 2.0, FutureTense, Gadgets, Good 2.0, [...]

  196. [...] @acnapyx: HTML5 рулира. Мри, Flash, мри, куче! http://9elements.com/io/?p=153 [...]

  197. [...] You can read more about this site and html5 here. [...]

  198. this is Amazing!
    Wow!
    .
    .
    .
    Just
    .
    .
    .
    wow!

  199. This page is a fraud.

    Where’s the HTML5? Looking at the source code and see nada.

    I’m seeing only lots of javascript. Should be called “amazing audio canvas demo in JS”

  200. scusa la schiettezza, ma sto sito fa veramente ridere.
    senza offesa, ma sembra fatto da un bambino di 5 anni che ha appena scoperto jquery

  201. The Future is Now…and it’s name is HTML5.

    Do you realize how cumbersome it is to power up a Flash application and design rich interactive internet applications that allow the user to feel like they have control of the experience?

    Flash puts on a show, while HTML5 engages and enables the user.

    Bravo for this preview!

  202. hola! me parece muy impresionante lo que se puede lograr con canvas!!… no hablo ingles mi pregunta es… Estoy creando unn videojuego pero estoy comenzando… como hago para colocarle neblina mientras un objeto o muñeco se desplaza por el mapa….
    es decir es un juego de accion el objeto se desplaza es como imperiun… no se si me explico bn.. si alguno puede ayudarme se lo agradeceria…

  203. [...] información (en ingles): http://9elements.com/io/?p=153 canvas, CSS3, demo, [...]

  204. [...] Ein schönes HTML5 Experiment von 9elements. [...]

  205. [...] HTML 5 Canvas Experiment features a demo that uses the HTML 5 <canvas> and <audio> tags. You’ll need a [...]

  206. everybody need flash. Is that too hard to install flash or what kind of morons are here to screaming hurraa for HTML5. it tries to generate same visual output that has been done years with flash.

    flash haters, stay with your lynx browsers.

  207. [...] been observing for a while now that the current web stack feels like Flash did in 1996. Look at the canvas demos, for example. The canvas demos we’re seeing now are totally reminiscent of the Flash demos we [...]

  208. [...] been observing for a while now that the current web stack feels like Flash did in 1996. Look at the canvas demos, for example. The canvas demos we’re seeing now are totally reminiscent of the Flash demos we [...]

  209. From now an i ofcially love HTML5

  210. [...] HTML5 Canvas Experiment – Perhaps good for comparing different Javascript engines. It chokes on Firefox 3.5 on my Atom 330, but works well on 3.6. [...]

  211. [...] 9elements HTML5 Can­vas and Audio Exper­i­ment (see also the blog post) [...]

  212. Seen this type of visual effect before on:

    http://www.wefeelfine.org/

    … but it’s done in a Java app.

    Nice audio though…

  213. [...] learn more about the project, check out the blog post on [...]

  214. Please turn this app into open source code, and share with us !!

  215. [...] HTML5-Canvas-Experiment-«-IO-9elements [...]

  216. Looks good but can we do without scripting all these effects.

  217. [...] HTML5 Canvas实验 [...]

  218. wow! I’m stunned!

  219. Hi i’m testing with IE 9 Platform Preview and is working well.

    Good job, html5 will win all other technologies. Is the future.

  220. [...] http://9elements.com/io/?p=153 May 18th, 2010 | Category: Design [...]

  221. [...] don’t see that as a problem. As we have already shown, HTML5 holds some amazing [...]

  222. The canvas element is not dynamically resizable, when you resize the window its size does not change, well at least not on chrome or opera…. only a small issue otherwise this is pretty awesome…

  223. Waouh… This is the first time I see how it’s possible to do with Html 5 Canvas… It’s incredible. -> go work. :p

  224. Cool. But, users want apps, not just animations. I need interaction.

  225. [...] 3:pixlr Most of the competitors are using Flash as the photo editor, HTML5′s Canvas killing feature will soon replace the [...]

  226. Hi
    This is a great animation
    I have to create a 3D animation with the earth in rotation and some places to be clicked
    do you think it ‘s possible with html5 ?

  227. [...] HTML5 Canvas Experiment [...]

  228. [...] HTML5 Canvas Experiment [...]

  229. [...] HTML5 Canvas Experiment [...]

  230. Does this work in ipad?

  231. Nice experiment..

    But ye…
    Dont forget to tell readers you stole this whole concept from Jonathan Harris’ Java app.
    “we feel fine” : http://www.number27.org/wefeelfine.html

    Nice to see people making conceptual stuff….. but if you steal something you should give credits to its creator..
    Even if its a different language.

  232. [...] HTML5 Canvas Experiment [...]

  233. [...] HTML5 Canvas Experiment [...]

  234. Nice to see people making conceptual stuff….. but if you steal something you should give credits to its creator..

  235. [...] can deform the video, while it’s playing, in real time and then put itself back together.This Html 5 Canvas experiment wasn’t really video based, but was pretty cool so I included it. It ties into the social [...]

  236. nice share

  237. Hm, didn’t load on my iPad

  238. Wow this is truly amazing. You guys deserve a big pat on the back. I love particles.

  239. AWESOME!!! And.. awesome song!!! Who made this song? Can anyone tell me please?

    Someone give the link and the name. OKay, but… the name of the band maybe help more!!!!

    “thank you” is the name of the music.
    now I need the name of the band. This song is so great! That I keep the site opened in my browser.

  240. [...] HTML5 Canvas and Audio Experiment [...]

  241. [...] HTML5 Canvas and Audio Experiment [...]

  242. [...] no este del todo listo para la producción, pero que se acerca, se acerca. Mucho se ha dicho ya del HTML5, pero poco se usa a decir verdad. Lo que si sabemos es que ésta versión viene [...]

  243. [...] HTML5 Canvas and Audio Experiment [...]

  244. [...] supercool particle engine experiment using nothing but HTML5 [...]

  245. This here is a great example of what the combination of html5 and JavaScript can accomplish, we are definitely seeing the rise of a different breed of website. This is just a demo I can’t wait to see what the future holds for this technology.

    This site could be seen as an example of a web full of artistic expression not just information. The combination here of animated imagery, sound, and interactivity has created a really interesting and cool webpage. As artists first discovered paint and started painting works of art, perhaps artists will discover the web and start using this as a new medium combining all current forms of medium into one.

    For those of you who are interested, I am covering websites like this in my blog http://www.thedsp.net/wordpress and would be thrilled if anyone could refer me to other sites similar.

  246. Also, the Reader button in the address bar replaces the RSS button, leaving one to wonder how you’d subscribe to a site’s RSS feed if Safari Reader is active. The answer is to click and hold on the Reader button, which reveals the normal RSS menu for various feeds.
    discount code IT review home weight machines Hard Drive Recovery ||
    thanks

  247. I think you have a great page here… today was my first time coming here.. I just happened to find it doing a google search. anyway, good post.. I’ll be bookmarking this page for sure.

  248. From now an i ofcially love HTML5

  249. [...] click y el tweet será mostrado. Pueden verlo con un browser moderno :)Link de la animaciónVia: HTML5 Canvas Experiment Tweet Deja un comentario Click here to cancel reply. Nombre (obligatorio) Mail (no será [...]

  250. Very excellent weblog, thank you so much for your time in writing the posts.

  251. хочу выразить свою точку зрения о сайте maxim-axenov.ru или maxim1298wmz.ru ну в общем, какая разница.
    Действительно, согласна со многими предшественниками…
    Способ заработка очень хороший, дает возможность заработать многим людям.
    Потратила 4 часа на обучение, зато чистая прибыль за эту неделю 220$.
    не у каждого есть такая возможность заработать! Используйте услугу full – версии.
    …деньги приходят быстро… вот теперь и я решила оставить свой отзыв,
    чтобы другие тоже обратили внимание на него и воспользовались
    возможностью заработать…удачи вам всем в работе!!

  252. I am continually searching online for tips that can benefit me. Thx!

  253. [...] Link: http://9elements.com/io/?p=153 [...]

  254. in my FF4beta9 most examples don’t work anymore.. btw comment form should be on top

  255. I am very impressed by the possibilities with HTML5!

  256. But with later versions of Fire fox and Safari, HTML5 is incorporated within them. Although the iphones are using HTML5 and it would be a great career in this as this is the world of technology.

  257. [...] 9elements came up with an interesting demonstration of the abilities of HTML5. This is a self-described “little experiment” which involves 100 tweets related to HTML5 that are loaded and subsequently displayed using a Javascript-based particle engine. [...]

  258. “”" – and who needs Flash anyway????”"”

    Man be practical and be more in-depth about comparing subjects before saying that…
    mole my words html5 canvas is new around the corner and just doing show offs… what flash can achieve and away 3D flash can… canvas wont be near… like NOT ever. now WHO ILL NEED canvas animations unless for small show offs? ;)

  259. Gustavo Duenas March 15, 2011 at 9:09 pm

    Hi I was wondering if you can send me some information about real applications of the html5 canvas for websites, the experiment is great, but I’d like to see how this canvas could be applied for a website, as flash could

  260. [...] Demonstration of HTML 5’s Canvas and Audio Elements (9elements | Aug 3, 2009) [...]

  261. Здраствуйте, я хотел бы поделиться c вам о новейшем невероятном информативном блоге выход из позиции.
    Тут вы найдете много необычной и красочной комментариев о кредитах, кредитах и тендерах. Вы сможете так же просмотреть обучающие видео записи, которые успростят вам знакомство с основ в таких понятиях как облигации и тендеры.

    Одной из причин рассматриваемого информационного портала есть хорошая манера подачи информации для новых участников, которая заключается в неспешном погружении с теоретической частью курса. С комментариями относительн упомянутого портала вы можете познакомиться в чате. Освоенные навыки помогут лучше знакомиться с современными экономическими обстановками ситуациями в мире. Похожие статьиТеория Доу

  262. [...] HTML5 Canvas实验 [...]

  263. [...] Extremely cool site using particles in html5 canvas plus audio. I love it. Some words on it can be found here. [...]

  264. haisreriphemn May 18, 2011 at 3:45 pm

    Hi !!! Good job!

  265. [...] 9elements’ HTML5 Canvas Experiment uses processing.js to display a multicoloured particle stream of 100 tweets relating to html5. [...]

  266. Howdy just wanted to give you a brief heads up and let you know a few of the pictures aren’t loading properly. I’m not sure why but I think its a linking issue. I’ve tried it in two different internet browsers and both show the same outcome.

  267. [...] HTML5 Canvas and Audio Experiment [...]

  268. that’s a good write up.. I am coding my first Web app with HTML5…i am in love with the canvas :)

  269. [...] HTML5 Canvas实验 [...]

  270. Nice Information of html 5. i will implement it in my site

  271. Bookmarked your page, enojyed skimming though it. ta.

  272. [...] HTML5 Canvas Experiment [...]

  273. Awesome blog! Is your theme custom made or did you download it from somewhere? A design like yours with a few simple tweeks would really make my blog shine. Please let me know where you got your theme. Kudos

  274. [...] HTML5 Canvas Experiment [...]

  275. [...] HTML5 Canvas Experiment Time for us to play with this technology. We’ve created a little experiment which loads 100 tweets related to HTML5 and displays them using a javascript-based particle engine. Each particle represents a tweet – click on one of them and it’ll appear on the screen. [...]

  276. [...] been observing for a while now that the current web stack feels like Flash did in 1996. Look at the canvas demos, for example. The canvas demos we’re seeing now are totally reminiscent of the Flash demos we [...]

  277. [...] → More Info [...]

  278. I am impressed with this website , very I am a fan.

  279. [...] HTML5 Canvas Experiment [...]

  280. [...] HTML5 Canvas Experiment [...]

  281. [...] HTML5 Canvas Experiment [...]

  282. Song is “Thank You (feat. Dr. Birgit Lührs) – The Spoken Project”

Leave a comment