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.