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.

DeviantART muro

More Info on DeviantART muro

Super Mario Kart

Play JavaScript Super Mario Kart Online.

Super Mario Kart

More Info on Super Mario Kart

Canvas Cartoon Animation that’s as good as Flash

This short animation is as good as Flash, this is surely to amaze you.

Canvas Cartoon Animation thats as good as Flash

More Info on Canvas Cartoon Animation that’s as good as Flash

Asteroid Belt sample

Introducing hardware accelerated canvas, video and audio.

Asteroid Belt sample

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.

Berts Breakdown

More Info on Bert’s Breakdown

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.

Canvas + SoundManager Audio Player with Waveform effects

More Info on Canvas + SoundManager Audio Player with Waveform effects

The Flickr Canvas SlideShow

Canvas Slideshow (with HTML5 canvas).

The Flickr Canvas SlideShow

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.

Neon Text Effect

More Info on Neon Text Effect

Fishtank

Fishtank hardware accelerated canvas, video and audio.

Fishtank

More Info on Fishtank

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.

Face Detection in JavaScript via HTML5 Canvas

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.

Charact-o-matic

More Info on Charact-o-matic

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.

More Info on 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.

Wikipedia Knowledge Map

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!)

Pacman

More Info on Pacman

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.

iPaint

More Info on iPaint

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.

Delicious recent bookmarks

More Info on Delicious recent bookmarks

Interactive Polaroids

View set of images in polaroids.

Interactive Polaroids

More Info on Interactive Polaroids

3D Canvas Perspective

Interactive 3D Canvas Perspective of any site you enter

3D Canvas Perspective

More Info on 3D Canvas Perspective

3D Model Viewer using the Canvas Element

3D Model Viewer using the HTML5 Canvas Element.

3D Model Viewer using the 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.

Canvas Audio Burst Animation

More Info on Canvas + Audio Burst Animation

Catfan

Click on any cloud to see the magic.

Catfan

More Info on Catfan

Dynamic Image Collage

Berry de Vos (aka RadicalFX) has created a Dynamic Image Collage creation tool, built with canvas.

Dynamic Image Collage

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.

Sinuous

More Info on Sinuous

Coulisse

Elmer has created this coverflow effect called Coulisse using the canvas element.

Coulisse

More Info on Coulisse

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.

RectoVerso

More Info on RectoVerso

3D Earth

This demo shows the earth, using a collada file for the mesh and texture map, and a custom animated texture.

3D Earth

More Info on 3D Earth

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.

Sketchpad

More Info on Sketchpad

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.

Canvas Parallax

More Info on Canvas Parallax

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.

Threshold Filter

More Info on Threshold Filter

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.

Liquid Particles

More Info on Liquid Particles

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.

Music Visualisation with SoundManager2

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.

Strange attractors - beautiful chaos and canvas

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.

Agent 008 Ball

More Info on Agent 008 Ball

Sharing is Caring
  • sureshpeters

    itss aweeeeeesommmeeeee thanks for inspiration one :)

    • Balayya

      Aweso………………………………………………………………me

  • Paul

    Sinuous is a clever little game. If you like html puzzle games (suitable for ipads as well) check out this:

    http://goo.gl/zI6A

  • http://www.swopper-shop.de/ Swopper

    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

  • Tomas

    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?

  • James

    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.

  • http://scriptoid.com Alex

    Here is a nice diagram editor made in HTML5 http://diagramo.com

  • Brett Widmann

    Wow! These are some really cool apps and demos! Thanks for sharing.

  • hibin

    oh! so good!

  • http://diagramo.com Abdullah

    Its vry nice

  • http://kevinedu.tumblr.com kevin

    how can I do these things? are there some softwares similar than adobe flash?

    • Jack Stanley

      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.

  • Tomas

    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.

  • http://eulin.co Adriano

    Very nice exemplas, thanks

  • http://www.picozu.com Thunderclap

    Check out Picozu at http://www.picozu.com for a HTML5 image editor that really pushes the boundaries.

  • http://www.cmikavac.net pootzko

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

  • http://www.geekandblogger.com Pavan Somu

    Some looks attractive & designed good.. But I don’t think not all looks fine with trending HTML5 :(

  • http://www.satyathakur.com Satya Thakur

    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.

  • Jai

    Very cool demo canvas for HTML5. I love most of them. Thanks!

  • Prabha

    These HTML5 canvas demos and applications are very attractive and beautiful. Color Cycling is a brilliant canvas demo i loved it.

  • Kamal

    Mindblowing HTML5 canvas demos and applications. Asteroid Belt Sample, Neon text effect, 3D earth and many more are worth sharing.