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

Book Shop - Further reading.

Where I can, I have put links to Amazon for books that are relevant to the subject, click on the appropriate country flag to get more details of the book or to buy it from them.

cover Game Design for Teens.

Commercial Software Shop

Where I can, I have put links to Amazon for commercial software, not directly related to this site, but related to the subject being discussed, click on the appropriate country flag to get more details of the software or to buy it from them.

cover JBuilder - There is also a free version of Jbuilder at borland website . However its licence conditions are quite restrictive so you may prefer another java IDE.

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

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