Next page | Contents page |

The <canvas> element

To make a rectangular area in the HTML page that we will be able to draw on, replace the paragraph element, <p>...</p> by this:


	<canvas id="cnv" width="800" height="600"></canvas>

This is an example of an element that has 3 "attributes", written in quotes: id, width and height.

The id gives the canvas element a unique name so it can be found in the page by our program when we see how to write that. Here it has been called cnv but any name could be used, as long as it is unique within the page. (You could have more than one canvas element in a page but we will not need to do that.)

width and height are measured in pixels, the dots that make up the display screen. These two attributes could be omitted if we do not know at this stage how big the canvas needs to be. That might be the case if we want it to fill the browser window and in that case we could set the two values later from within our program. Our Javascript program will be able to find out how big the window is.

Next page | Contents page |