| Next page | Contents page |

Colours

Shapes drawn in the canvas will start as lines. Lines are coloured by setting a strokeStyle. If the lines close to make a solid area that may be coloured by setting a fillStyle. In both cases there are several ways to specify colour. For now let's just use names.

There are a large number of colour names defined in the browser. They are listed here.

Colour definitions are really part of a third web language, CSS (Cascading Style Sheets). We will not have much need of CSS in this guide but you will need it for larger web projects.

Having got the graphics context we set stroke and fill colours whenever we need to, like this:


	g2.strokeStyle = "green";
	g2.fillStyle = "yellow";

Note that the names are strings of characters and therefore appear in quotes. They are not keywords of the Javascript language.

That page listing named colours is part of an extremely useful reference web site maintained by the Mozilla organisation. When you forget what to write in Javascript it is easy to search for "MDN ..." (whatever). There are many very good tutorial pages on that site too. When you want to know ALL about the canvas and its context, look there.
| Next page | Contents page |