Graphics and Games on Web

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.

http://processing.org/

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.

http://raphaeljs.com/


metadata block
see also:

 

Correspondence about this page

This site may have errors. Don't use for critical systems.

Copyright (c) 1998-2022 Martin John Baker - All rights reserved - privacy policy.