Why drawing a rectangle is interesting
Computer programming constantly uses encapsulation; someone else figures out how to do something, and you just use it without having to worry about the details. Functions are one mechanism for encapsulation, which is the important concept I want to communicate.
Next, you can edit the lines reading:
drawrectangle( "blackrectangle", 50, 50, 10, 100 ); // draw a black rectangle on top
drawrectangle( "blackrectangle", 50, 100, 1, 1 ); // draw a dot (pixel)
to draw rectangles in whatever positions and sizes you want. You don't have to worry about how this function is implemented, just that it takes the coordinates of the upper left hand corner of a rectangle and the rectangle's width and height as parameters. Don't change anything else in these lines, just the numbers, and see what happens when you save your edits and reload the file from your browser.
In later hubs, I will give examples of how to use this function to draw more complex shapes.
The html file