Applications, games, tools and tutorials for the HTML5 canvas element
Mike Pinkowish has created this canvas simulation of the Game of Life, a cellular automaton example originally devised by John Conway in 1970.
The game of life: do not pass GO, do not collect 200
Mike has added a host of extra options to keep your game of life interesting such as render speed, block size, and premade patterns. And it is also possible to spawn new life forms by clicking and dragging the mouse around the canvas.
Flot is a Javascript plotting library for jQuery created by Ole Laursen. It takes data from an array and uses the canvas element to draw the plotted graph.
Flot supports lines, points, filled areas, bars and any combinations of these, in the same plot and even on the same data series.
Flot is really simple to use, and works in multiple browsers (requiring ExCanvas for Internet Explorer).
There are also a set of examples of what Flot can do.
Developer instructions
Using Flot is easy. Simply create a placeholder div with a defined width and height (either inline or in an external stylesheet) to put the graph in:
<div id="placeholder" style="width:600px;height:300px"></div>
When the div is ready in the DOM, which is usually on document
ready, run the plot function:
$.plot($("#placeholder"), [data], [options]);
Where data is an array of data series and options is an object with
settings if you want to customize the plot. For example, to draw a line from
(0, 0) to (1, 1):
$.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });
The plot function will immediately draw the chart on to the page.
Real World Examples
Coverfire, by Jerason Banes, is a canvas remake of the Apple II video game Crossfire.
Navigate the intersections of your city picking up bonus objects and shooting the enemies that wait around the edge of the screen for the right time to attack. You can shoot in four directions independent to the direction you are moving. Once you run out of ammo, a crosshair item will appear, you need to collect this to get more ammo.
Surrounded!
The controls are as follows:
Berry de Vos (aka RadicalFX) has created a Dynamic Image Collage creation tool, built with canvas.
Your collage creating begins with a Flickr search, which will bring up a list of the most popular results. Clicking any of the results will automatically add them to the collage area as a new layer. Each layer can be altered in a variety of ways – from moving, scaling and rotating to changing opacities, blend modes and shadows. You can also adjust the layer position in relation to the other layers.
Not the prettiest collage in the world...
The JavaScript code for the collage has been split in to two parts. The first part is a library that loads in all the calls for canvas and gives the page the ability to modify the layers in the collage; whilst the second part of the JavaScript code handles the page interactions and binds the HTML controls for the layers.
Berry comments:
The most difficult thing to get going was handling the collision interaction with the Objects, because I couldn’t use the normal mouse events based on the DOM. I had to figure out the math behind the collisions myself, this code is not very pretty.
Tom Theisen has created this rather pretty ’spread’ pattern demo using the canvas element. The demo, which has a rather organic vine-like feel to it, has options to cycle colours, change the position where the pattern originates and to fade older patterns.
Spreading out across the canvas
The demo works best in Google Chrome.
3D Model Viewer by Giuseppe Sicari uses a combination of JavaScript and canvas to display models of three-dimensional objects which are represented by a list of vertices and a set of faces each of which consists of at least three vertices.
A helicopter
The viewer allows you to rotate the object; fill the object with a colour; set transparency and add a motion blur effect.
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!
