How do we put animated graphics and games on web pages? One way is to use proprietary formats like flash but here we explore some open and standards based options.
HTML5 Canvas
The HTML5 standard allows a component called a 'canvas'. This is a rectangular area of screen which can be written to by javascript to produce lines, shapes, text and so on. Javascript can also read mouse position and key presses so can provide an interactive graphical interface.
For more complicated applications it can help to use a javascript library such as processing.
SVG
SVG is now a standard way to include graphical information into web pages in a way that is 'vector' as opposed to 'raster' based which means that graphics can be scaled while minimising pixelation problems.
However its not just for static diagrams, it also allows animation and scripting.
SVG images can also be animated using external javascript by using VML which allows the SVG to be seen as a DOM tree.
Raphaël is a javascript library which simplifies this task.
