HTML5 Canvas Demos and Applications To Make You Say WOW
Our today’s post is on HTML5 Canvas Applications and Demos. Being the last day of this calender year, we were bit skeptical on topic to choose. After thinking for quite a while we chose HTML5 Canvas Applications over others as we wanted to portray a different subject. In this post, you will be able to check the power of HTML5.
The Most astonishing facet of HTML5 is the HTML5 canvas. The canvas element is a drawable region defined in HTML code with height and width attributes. Enjoy the post and celebrate New year with full oomph. If we have missed any cool HTML5 application or Demo, please feel free to share it via comments, thanks. Slodive Team wishes all its readers a happy and prosperous New Year.
DeviantART muro
The tool can be used as a stand-alone web application as well as a lightweight drawing tool for adding pictures to forum comments.
Super Mario Kart
Play JavaScript Super Mario Kart Online.
Canvas Cartoon Animation that’s as good as Flash
This short animation is as good as Flash, this is surely to amaze you.
More Info on Canvas Cartoon Animation that’s as good as Flash
Asteroid Belt sample
Introducing hardware accelerated canvas, video and audio.
More Info on Asteroid Belt sample
Bert’s Breakdown
As a learning exercise and an attempt to push the latest browsers I decided to create a platform game using the new HTML5 canvas element.
Canvas + SoundManager Audio Player with Waveform effects
Canvas-based UI with visualization options. Note: Spectrum/EQ visualizations disabled for IE (too slow.) Data is not currently available under HTML5.
More Info on Canvas + SoundManager Audio Player with Waveform effects
The Flickr Canvas SlideShow
Canvas Slideshow (with HTML5 canvas).
More Info on The Flickr Canvas SlideShow
Neon Text Effect
In this combined design and coding tutorial, we are creating a neon glow text effect with CSS and jQuery, perfect for spicing up your web pages while keeping an eye on SEO.
Fishtank
Fishtank hardware accelerated canvas, video and audio.
Face Detection in JavaScript via HTML5 Canvas
You have probably seen face detection at work in programs like iPhoto and Picasa, but what if you could do that performantly in JavaScript? Chinese developer Liu Liu has done the honors, and implemented the algorithm using the canvas element.
More Info on Face Detection in JavaScript via HTML5 Canvas
Charact-o-matic
Type the text you wish to display in to box on the bottom left, and then use the controls scattered around the display area to change the 3D effect.
Color Cycling
Joe Huckaby has gone back to an 8-bit technique for his colour cycling canvas demo. Back in the days of 8-bit video games graphics cards could only render 256 colors at a time so colour cycling was often used to achieve interesting visual effects by cycling (shifting) the color palette. The technique was fast and took virtually no memory. Thus began the era of color cycling.
Wikipedia Knowledge Map
Ingo Straub has created this unique HTML5 canvas demo – a knowledge map graph which shows relations between different Wikipedia articles.
More Info on Wikipedia Knowledge Map
Pacman
This is most of the Pacman game everyone knows and loves. It isnt a complete implementation yet and I do plan on working some more on it, however it should mostly be playable. (who knew the ghosts have a strategy!)
iPaint
iPaint is esentially the online version of MS Paint program. iPaint is just a demonstration of how we can implement the graphics based program eithout worrying about what-ifs question and performance.
Delicious recent bookmarks
cloudz project is a webapp that offers an interactive graphical visualization for delicious and allows you to browse, search and select tags and related posts.
More Info on Delicious recent bookmarks
Interactive Polaroids
View set of images in polaroids.
More Info on Interactive Polaroids
3D Canvas Perspective
Interactive 3D Canvas Perspective of any site you enter
More Info on 3D Canvas Perspective
3D Model Viewer using the Canvas Element
3D Model Viewer using the HTML5 Canvas Element.
More Info on 3D Model Viewer using the Canvas Element
Canvas + Audio Burst Animation
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.
More Info on Canvas + Audio Burst Animation
Catfan
Click on any cloud to see the magic.
Dynamic Image Collage
Berry de Vos (aka RadicalFX) has created a Dynamic Image Collage creation tool, built with canvas.
More Info on Dynamic Image Collage
Sinuous
The goal is simple: avoid the red dots! Built using the HTML5 canvas element. Works on iOS & Android devices.
Coulisse
Elmer has created this coverflow effect called Coulisse using the canvas element.
RectoVerso
It can scale automatically to fit any size images and since it’s Canvas based, it can allow other HTML elements on the page to interact with it through simple Javascript functions.
3D Earth
This demo shows the earth, using a collada file for the mesh and texture map, and a custom animated texture.
Sketchpad
Sketchpad’s drawing tools allow for the usual brush, pencil, fill and text items but it also provides tools for spirographs, unusual shapes and stamps. Applying a pattern to these items is simple, meaning it’s easy to create something artistic even if you’re not particularly artistic yourself.
Canvas Parallax
jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.
Threshold Filter
A threshold filter converts grayscale or color images into high contrast, black and white images. This threshold filter has been created with canvas by hitode909.
Liquid Particles
Move your mouse around the page to have the particles follow the cursor, click the mouse button to send the particles flying in the other direction. Best viewed in Chrome.
Music Visualisation with SoundManager2
Jacob Seidelin has created what he believes to be the first music visualisation demo using the canvas element and SoundManager2! Playing Radiohead’s Idioteque, the demo displays frequency bars, waveforms, binary outputs and create an image of Thom Yorke, lead singer of Radiohead.
More Info on Music Visualisation with SoundManager2
Strange attractors – beautiful chaos and canvas
Math has the ability to both be totally awesome and beautiful as well as make me bang my head into the wall. While the actual math involved at times goes way above my head, some things are just so damn elegant and when, on top of that, they can be visualized with pretty pictures, I’m sold.
More Info on Strange attractors – beautiful chaos and canvas
Agent 008 Ball
Agent 008 Ball is an addictive game that combines billiards with the high stakes world of international espionage. Cutting edge HTML5 features.
Subscribe to SloDive (it's free)
itss aweeeeeesommmeeeee thanks for inspiration one :)
Aweso………………………………………………………………me
Sinuous is a clever little game. If you like html puzzle games (suitable for ipads as well) check out this:
http://goo.gl/zI6A
Fantastic HTML demos and applications. My favorite Designs are Color Cycling, Fishtank and Neon text effect. Thanks for sharing. i’ll be sharing this to my friends
I tested Mario and reminded me of Flash for 10 years ago. HTML5 is hype but is it really fun to develop things that work different or bad in all browsers? People want to do HTML5 because it’s open and Flash is not supported on some devices, but if advanced HTML5/javascript is often too slow on tablets/phones, what’s the point?
Apart from compiler optimisations which google, microsoft, mozilla and apple are all working on there is no reason why in time improvements to browsers mean that javascript/html5 canvas can’t catch up and match flash, flash is not magic, it’s just software all the same. I love the wikipedia visualisation. very cool.
Here is a nice diagram editor made in HTML5 http://diagramo.com
Wow! These are some really cool apps and demos! Thanks for sharing.
oh! so good!
Its vry nice
how can I do these things? are there some softwares similar than adobe flash?
Check it out:
http://www.mugeda.com
Mugeda is a cloud based HTML5 animation platform, where you can create, share, and publish organic HTML5 animation contents, all in your browser, without any download or installation. The created animation content can be used in a wide range of applications like ads, games, tutorials, cartoons, and can be viewed on any devices including PC, smartphone, and tablets.
This feels like 10 years ago when flash was popular. Now dekade latter the world gets excited about same. I don’t understund something here.
Very nice exemplas, thanks
Check out Picozu at http://www.picozu.com for a HTML5 image editor that really pushes the boundaries.
here is one I made based on “Liquid Particles” code (with authors permission of course): http://swarm.cmikavac.net/
Some looks attractive & designed good.. But I don’t think not all looks fine with trending HTML5 :(
Great list, thanks for putting it together. One more app you should also check out jMockups, a HTML5-based high fidelity mockup tool that I recently launched. Most of the GUI for the mockup editor is built on top of the canvas element which has been tricky but definitely worth it for the flexibility it provides.
Very cool demo canvas for HTML5. I love most of them. Thanks!
These HTML5 canvas demos and applications are very attractive and beautiful. Color Cycling is a brilliant canvas demo i loved it.