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.
The tool can be used as a stand-alone web application as well as a lightweight drawing tool for adding pictures to forum comments.
More Info on DeviantART muro
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.
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
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.
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.
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.
More Info on Neon Text Effect
Fishtank hardware accelerated canvas, video and audio.
More Info on Fishtank
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.
More Info on Charact-o-matic
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.
More Info on Wikipedia Knowledge Map
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!)
More Info on Pacman
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.
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.
More Info on Delicious recent bookmarks
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
More Info on Canvas + Audio Burst Animation
Click on any cloud to see the magic.
More Info on Catfan
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
The goal is simple: avoid the red dots! Built using the HTML5 canvas element. Works on iOS & Android devices.
More Info on Sinuous
Elmer has created this coverflow effect called Coulisse using the canvas element.
More Info on Coulisse
More Info on RectoVerso
This demo shows the earth, using a collada file for the mesh and texture map, and a custom animated texture.
More Info on 3D Earth
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.
More Info on Sketchpad
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.
More Info on Canvas Parallax
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.
More Info on Threshold Filter
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.
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.
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.
More Info on Agent 008 Ball