Applications, games, tools and tutorials for the HTML5 canvas element
Klokan Petr Pridal has produced a raster map reprojection canvas demo using the Proj4js JavaScript library. A map projection is any method of representing the surface of a sphere or other shape on a plane, which distorts the surface but is necessary for creating maps.
He's got the whole World in his map..
The demo calculates the “map projection” directly in the web browser using only JavaScript, and displays the output with canvas.
FreeCiv is a free and open source empire-building strategy game inspired by the history of human civilization. FreeCiv.net is a fork of the original project, designed to run in a web browser. The game can be played online against other players, or in single player mode against AI opponents. The game uses the HTML 5 canvas element to render the isometric map.
Civilised
Comments from the author:
The idea of creating a version for Freeciv which would be playable online in a browser came about some time in 2007, and this project has evolved into what it is now since then.
JaVortex is (to quote) a gravitational attraction particle engine NBody simulator, created by Anthony. Put simply, the demo involves lots of particles attracted to each other and the position of the mouse cursor. As they move around the screen, they leave colourful trails.
Cool vortex, ja?
There are various settings to play around with, including the number of particles and whether NBody is turned on or off. With NBody off, the demo will go much faster,and allow for many more particles.
Momoflow, by Alexander Presber, is a canvas coverflow implementation using jQuery.
After playing around with the YUI Coverflow canvas demo, Alexander felt it was rather overengineered; difficult to tweek and had some performance issues – so what better way to improve the demo than to create your own?
Coverflow with jQuery
To help increase the speed of the demo, Momoflow caches each image and it’s reflection on to an intermediate canvas, perspectively transforming this onto another canvas for each rendering angle.
In 1978 Space Invaders was released in to arcades everywhere, now it has been remade as a canvas game as yet another demonstration of what some brief knowledge of canvas can do.
Old school space shooter
Controls are simple, with the cursor keys providing left and right directional movement and the space bar responsible for shooting those pesky aliens out of the sky!
It’s always useful to remember that canvas isn’t just a useful tool for display, but can also be used for reading data from images too. Jacob Seidelin’s JSASCII demo is a good example of that, grabbing an image, painting it on a canvas and then using getImageData() to retrieve information on the image. In this case, the data gathered is used to produce some rather great ASCII art.
ASCII art at its finest
There’s a selection of different demos of this technique available on Jacob’s site, together with the JavaScript library and documentation so you can make your own ASCII art!
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!
