Applications, games, tools and tutorials for the HTML5 canvas element
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.
If you’ve browsed Flickr for city photos for any length of time, you have probably come across photos which have had a tilt-shift effect added to them. A tilt-shift effect basically results in the photo looking like a model, and Mathieu ‘p01′ Henri has created a canvas demo that creates this effect.
Creating an effect
Comments from the Author:
A blurred version of the original image is generated using Canvas and drawImage(), then horizontal slices are composited with the original image to produce the final output. The blurred image is generated incrementally to improve the quality of the blurring effect. Without this, it would feature heavy bilinear interpolation approximations.
PurpleFloyd has recreated a platform game he originally built 15 years ago, updating it so it runs in web browsers using canvas and JavaScript. You play as Fred Jones as he makes his way through Adventureland and in to space.
Jump around! Jump up, jump up and get down.
Comments from the Author:
Nearly 15 years ago, when I was all of 15 years old, I wrote this little platform game which I have recently ported to Javascript/HTML5. It is a kind of Mario clone and at the time I named it “Fred Jones in Adventureland”… hmm, not a great name.
The platformer has 5 levels with a couple of different enemy variations, and obstacles such as falling platforms and plays smoothly throughout on the usual canvas supported browsers (the game supports Internet Explorer but runs slowly).
Darkimmortal has created this nightclub-esq music visualisation using two canvas elements and Soundmanager. One canvas is used for calculating the logic, which is then sent to the main canvas.
Ohh, sweet lemonade. Yeah, sweet lemonade
To start the demo and see the fancy patterns, select a track from the drop down and hit go. This demo is not suitable for epilepsy sufferers.
Andrew Hoyer has created a 2D cloth simulation within a canvas element. By clicking and dragging the points on the cloth, it will react as if it were a real cloth taking in to consideration both the constraints of the points around it which are trying to keep the cloth in it’s original shape and the effect of gravity.
Realistic
It’s a simple looking, but elegant demo which performs smoothly with no slowdown throughout.
ANSI art is a type of computer art most famously used during the Bullettin Board Service years of the Internet. It’s like ASCII art, but uses a larger set of 256 letters, numbers, and symbols, and therefore is more flexible in what it can do. ANSI art has become less popular through the years due to the decline of BBS systems.
Meph has created a ANSI Art viewer that draws ANSI files to a HTML5 canvas. All the decoding is done client-site in JavaScript. Computed ANSI files can be saved PNGs.
ANSI art
With this demo Meph has provided a large number of sample ANSI files for you to try and play around with.
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!
