Applications, games, tools and tutorials for the HTML5 canvas element
Gauge.js allows you to add Apple-esque gauges (with shading and reflection) to your webpages. If you use a Mac or an iPod, these gauges will look familiar to you as they are similiar to the disk space allowance gauges.
Pretty gauges...
Including it in your pages is simple. Just add a script include at the top of your site and then call it on a block level element using gauge.add(element).
Jacob Seidelin has furthered his music visualisation idea with the release of JuicyDrop, which adds the MilkDrop plugin for Winamp to the previous canvas/JavaScript/Sound Manager 2 mix.
Check out those visuals!
Simply select your song from the right hand menu to see the visualisation in action.
A few keyboard shortcuts may enhance your experience:
Works on Chrome or Firefox 3, but Chrome works better.
CAKE is a scenegraph library for the canvas tag. The CAKE library adds a few new features to the canvas tag, as well as fixing some previous problems and offering cross browser support to items which were previously single browser support.
The CAKE website features a demo page together with a Flash-style site (using CAKE intead of Flash) and a couple of games.
Christophe Résigné has created a starfield using the canvas element.
You can change direction by moving cursor over the windows, change/inverse speed with mouse-scroll and change stars amount by adding ?n= at the end of the url.
Lots of stars!
3bored is an interesting shooter/dodge ‘em up created by UpsideDownTurtle. Controlling a boxed shape spaceship, the idea is to dodge enemy fire while charging up your spacecraft to ground pound the enemy. As you progress through the levels, different enemy types and firepower appear making survival a much tougher job.
Ready, Aim, Fire!
Your spacecraft is controlled with the cursor keys, with the space bar used to charge your attack (hold to charge, release to attack).
What tier can you get to?
Not 1 but 146 demos today. John Resig, JavaScript guru and founder of the awesome jQuery library has ported the Processing visualization language to JavaScript, using the canvas element. With help from Casey Reas and Ben Fry they have created a lot of different demos using the library.
Processing.js
If you wish to only use the Processing API (not the language) you can interact with it like so:
var p = Processing(CanvasElement);
p.size(100, 100);
p.background(0);
p.fill(255);
p.ellipse(50, 50, 50, 50);
To use the full power of the language, you would pass in your Processing code as the second argument.
Processing(CanvasElement, "size(100, 100); background(0);" +
"fill(255); ellipse(50, 50, 50, 50);");
As for demos of the tool, there are 91 basic demos; 51 larger, topical, demos and 4 custom “in the wild” demos.
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!
