Applications, games, tools and tutorials for the HTML5 canvas element
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.
Those of you who have played Loco Roco may be able to find some similarities between that game and this tech demo. Blob Sallad, created by Bjoern Lindberg, is essentially a physics demo with the ability to split, join, drag and drop the blobs.
Blob Sallad
Dean McNamee has created a 3D cube full of the colours of the rainbow using canvas. The cube itself is semi-transparent throughout and can be rotated for those nice to see corner viewing angles.
Colorscube is a simple mapping of the RGB colorspace into 3d. A little bit of alpha goes a long way. Try it in black.Colorscube is a simple mapping of the RGB colorspace into 3d. A little bit of alpha goes a long way. Try it in black.
Colorscube
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!
