Applications, games, tools and tutorials for the HTML5 canvas element
Michael Strasser has created a tutorial which goes through the steps of creating a RSS icon using the canvas element.
The RSS icon in all it's glory
While I don’t necessarily think that canvas should replace the common image for these kinds of tasks, thanks to the complexity of the RSS icon Michael’s tutorial covers creating quarter circles, gradients and rounded rectanges – all useful skills to know if your starting to learn how to use the canvas element.
Sketchpad by Michael Deal uses the canvas element and a lot of JavaScript to create an impressive painting application.
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.
Not sure if this picture is pretty, or a mess... you decide!
The links along the top right offer more options to improve your image, and once you are happy with your image, you can save it out as a PNG. Give it a try!
QBASIC is an IDE and interpreter for a variant of the BASIC programming language, and Steve Hanov has created an implementation of QBASIC in Javascript. The tool uses canvas to display the screen, which is where your compiled code will eventually end up. Thankfully, Steve has included one of the original QBASIC examples – Nibbles, a variant on the popular Snake game.
More snake action with 'Nibbles'
Steve is currently running a guide of how to implement a virtual machine like QBASIC in JavaScript – and is well worth a read.
Hernan Amiune has created this interesting ‘image washing’ effect using canvas. The canvas starts blank or ‘dirtied’. Then raindrops fall from the top of the canvas slowly revealing the picture as if water was being used to clean the picture.
Reveal!
Comments from the Author:
The experiment combines a particle system and the image pixels alpha channel to create the effect.
Steven Sanborn has created this unique messaging canvas demo. The message is produced by pulling together animated circles and alpha sprites to form the letter.
Give me a 'C'
You can enter your own custom message in the box below the demo, and also increase settings such as the number of particles; whether they fade and the direction they bounce after they have shown each letter.
Mikko Haapoja has been working on his own Voxel engine for some time, but the other day decided to try implementing the engine with HTML5 and Canvas. The result is this: a 3D rendition of Thom Yorke from Radiohead imitating the start of the original House of Cards video.
Awesome
The demo also uses the HTML5 audio element for it’s soundtrack.
Mikko has some thoughts on whether canvas is a Flash killer:
This was an interesting experiment but from this I can say that right now HTML5 and Canvas is NOT yet the “Flash Killer” it’s being touted as. The performance on this experiment is quite a bit lower than what Flash can produce.
For a demo like this, we can agree. But as browser makers are currently locked in a JavaScript speed increase battle, it’s only a matter of time before newer browsers can handle this kind of thing with ease.
Warning! This demo is intensive, Chrome is definitely recommended!
Home to applications, games, tools and tutorials that use the HTML 5 <canvas> element - which allows for dynamic scriptable rendering of bitmap images.
Submit your demo, and if we like it we'll feature it on Canvas Demos!
