Applications, games, tools and tutorials for the HTML5 canvas element
Oswald Campesato has created an open source library filled with lots of different “eye-candy” canvas graphic samples.
Pretty graphics...
Comments from the Author:
This project contains sample code that illustrates how to render 2D geometric objects such as rectangles, circles, arcs, and Bezier curves in conjunction with curves such as Archimedean spirals, Cissoids, Cochleoids, Conchoids, Lissajous curves and Lituus curves.
Canvas Sphere by Emil Korngold renders a 2D projection of the 3D points of a sphere using a tiny sprite 3D engine. The demo uses z-sorting and alpha motion blurring to give the sense of 3D and rotation.
Funky blue sphere
Use the mouse to rotate the sphere, and click to toggle z-scaling.
Ed Spencer has created this canvas demo based on a screensaver found in OS X. The demo takes a set of images and then drops them on to the screen with a subtle semi-transparent rotating effect.
It's like photos falling on to a table
Comments from the Author:
Bean starts off with a blank canvas and a list of image urls, which it preloads before getting started. It then drops one image at a time, rotating it as it goes. Each falling image is called a Plunger, because it plunges.
Each Plunger gets a random position and rotation to end up in, and takes care of drawing itself to the canvas on each frame by calculating its current size and rotation as it falls away from you.
Think you’re pretty good on a bike? Try jsCanvasBike – a JavaScript motocross game by Anthony.
Do stunts on the hills
You earn points in the game by doing flips – press up to accelerate, down to brake, and left and right to lean your bike. Once you’ve got a high score, you can tweet it to share with others.
Roope Kangas has created this canvas physics demos showing lots of boxes of debris falling to the right hand side of the screen.
To the right!
Click on the canvas to pull the debris toward your cursor, drag the cursor to make the debris ‘dance; in patterns and then let go of the left mouse button to let them fly to the right again spreading out.
Guifi.net is a telecommunications network that uses peer to peer connections to provide it’s service. This demo shows the reach of the network over time by loading the connections over the top of a map using the canvas element.
All those networks..
The 8,000+ nodes and their respective links are drawn with a speed of 100 days per second. If you press the ‘clean’ button, you can zoom in on the map, and then press ‘init’ to draw the history at a close view.
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!
