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.
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.
Asteroid Belt sample
Introducing hardware accelerated canvas, video and audio.
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.
The Flickr Canvas SlideShow
Canvas Slideshow (with HTML5 canvas).
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 hardware accelerated canvas, video and audio.
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.
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.
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 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.
View set of images in polaroids.
3D Canvas Perspective
Interactive 3D Canvas Perspective of any site you enter
3D Model Viewer using the Canvas Element
3D Model Viewer using the HTML5 Canvas Element.
Canvas + Audio Burst Animation
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.
The goal is simple: avoid the red dots! Built using the HTML5 canvas element. Works on iOS & Android devices.
Elmer has created this coverflow effect called Coulisse using the canvas element.
This demo shows the earth, using a collada file for the mesh and texture map, and a custom animated texture.
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.
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.
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.
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.
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.
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.