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.

muro HTML5 Canvas Demos and Applications To Make You Say WOW

More Info on DeviantART muro

Super Mario Kart

Play JavaScript Super Mario Kart Online.

mario HTML5 Canvas Demos and Applications To Make You Say WOW

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.

helsinki HTML5 Canvas Demos and Applications To Make You Say WOW

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

Asteroid Belt sample

Introducing hardware accelerated canvas, video and audio.

astroid HTML5 Canvas Demos and Applications To Make You Say WOW

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.

bert HTML5 Canvas Demos and Applications To Make You Say WOW

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 HTML5 Canvas Demos and Applications To Make You Say WOW

More Info on Canvas + SoundManager Audio Player with Waveform effects

The Flickr Canvas SlideShow

Canvas Slideshow (with HTML5 canvas).

flickr HTML5 Canvas Demos and Applications To Make You Say WOW

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 HTML5 Canvas Demos and Applications To Make You Say WOW

More Info on Neon Text Effect

Fishtank

Fishtank hardware accelerated canvas, video and audio.

fish HTML5 Canvas Demos and Applications To Make You Say WOW

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.

detection HTML5 Canvas Demos and Applications To Make You Say WOW

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 HTML5 Canvas Demos and Applications To Make You Say WOW

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 HTML5 Canvas Demos and Applications To Make You Say WOW

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 HTML5 Canvas Demos and Applications To Make You Say WOW

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 HTML5 Canvas Demos and Applications To Make You Say WOW

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 HTML5 Canvas Demos and Applications To Make You Say WOW

More Info on Delicious recent bookmarks

Interactive Polaroids

View set of images in polaroids.

canvasphoto HTML5 Canvas Demos and Applications To Make You Say WOW

More Info on Interactive Polaroids

3D Canvas Perspective

Interactive 3D Canvas Perspective of any site you enter

digg HTML5 Canvas Demos and Applications To Make You Say WOW

More Info on 3D Canvas Perspective

3D Model Viewer using the Canvas Element

3D Model Viewer using the HTML5 Canvas Element.

3d HTML5 Canvas Demos and Applications To Make You Say WOW

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.

9elements HTML5 Canvas Demos and Applications To Make You Say WOW

More Info on Canvas + Audio Burst Animation

Catfan

Click on any cloud to see the magic.

cat HTML5 Canvas Demos and Applications To Make You Say WOW

More Info on Catfan

Dynamic Image Collage

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

collage HTML5 Canvas Demos and Applications To Make You Say WOW

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.

hakim HTML5 Canvas Demos and Applications To Make You Say WOW

More Info on Sinuous

Coulisse

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

coulisse HTML5 Canvas Demos and Applications To Make You Say WOW

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.

aneventapart HTML5 Canvas Demos and Applications To Make You Say WOW

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.

earth HTML5 Canvas Demos and Applications To Make You Say WOW

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 HTML5 Canvas Demos and Applications To Make You Say WOW

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.

parallax HTML5 Canvas Demos and Applications To Make You Say WOW

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 HTML5 Canvas Demos and Applications To Make You Say WOW

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 HTML5 Canvas Demos and Applications To Make You Say WOW

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.

radio HTML5 Canvas Demos and Applications To Make You Say WOW

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.

math HTML5 Canvas Demos and Applications To Make You Say WOW

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.

ball HTML5 Canvas Demos and Applications To Make You Say WOW

More Info on Agent 008 Ball

Sharing is Caring
Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Comment Rules

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i><q cite=""> <strike> <strong>

Kindly use a valid Name and Email address. Spam or unrelated comments will be deleted

If you are a regular commenter, be sure to check our Comment Contest.