Canvas basics
In this section we will learn some of the basics of using the canvas API. Now that we have a context, we can call its methods to draw lines and shapes. The API has a whole host of methods that let you draw everything from the most basic lines, to shapes, and even bitmap images.
You can find the source code for this section in chapter4/canvas-examples/canvas-examples.html.
Clearing the canvas
The background of the canvas is transparent. Whatever background color you specify for the canvas element in your CSS will show through. You can clear the canvas, or a portion of it, using the context's clearRect() method. It takes x, y, width, and height parameters and clears that part of the canvas.
context.clearRect(0, 0, canvas.width, canvas.height);
Context properties
By default, when you draw on the canvas, lines are one pixel wide and the color is black. You can change these by setting global properties on the context object.
penWidth: This property sets the width that lines will...
