The Canvas Element

HTML has an element called 'canvas'.

You can put one of these on your page and then draw on it.

You draw on it by writing javascript code.

Using a Canvas Element

Content can be provided in here in case this page is accessed using an old browser or a text only browser.

The default coordinate system has the origin at the top left with the x-axis horizontally and the positive y-axis pointing vertically down the screen. Each unit of the coordinates is one pixel on the screen.

Content can be provided in here in case this page is accessed using an old browser or a text only browser.

The code that creates the above picture uses three different rectangle drawing functions. The fillRect() function draws a large black square 100 pixels on each side. The clearRect() function then erases a 60x60 pixel square from the center, and then strokeRect() is called to create a rectangular outline 50x50 pixels within the cleared square.

Here is how to draw a straight line:

Here is how to draw a circle:

Here is how to write text:

On this page we draw some traffic lights. The lights cycle round this sequence:

1. Red - stop
2. Red and amber - prepare to go
3. Green - go (as long as the way is clear)
4. Amber - stop unless it’s not safe to do so
5. Red - stop