Example: Drawing lines and shapes

Using the ideas in this example, add lines and shapes to the canvas. Try removing or moving where stroke is used to see how it changes the image.

Try setting different values for lineCap (options include butt, round, and square), and different colours and thicknesses of lines. You can click on the arrow in the pane for the web page in order to see it in a separate window, which you can then resize.

In our example, we place the script elementAn HTML element that contains a script, tag name <code>script</code>. in the body elementAn HTML element that contains all the content of the page, tag name <code>body</code>. so that it can act on the page (and in particular, the canvas element) during page loading. Later we will learn how to execute steps after the page has been loaded, when we learn about events, at which point we can return the script element to the head elementAn HTML element that gives information about the page, tag name <code>head</code>..