Using HTML5 to Catch a Snake - Learn HTML5 by Creating Fun Games - page 188

Any valid CSS color string can be assigned to color properties in the 2D rendering context, including
colors with opacity.
Note
Pay special attention to the fact that the rendering context acts much like a state
machine. Once you set a fill or stroke style, as well as any other property, that
property will maintain that value until you change it.
Also, note that each subsequent drawing call that you issue, draws on top of
whatever is already on the canvas. Thus, we can layer shapes and images by
carefully arranging the drawing calls in just the right order.
Lines
Drawing lines is as easy as calling the function lineTo , which only takes two para-
meters, indicating the point where the line is going to. Subsequent calls to lineTo
will draw a line to the point specified by the function call, starting the line at the last
point where the line was. More specifically, the line starts where the current drawing
pointer is.
By default, the pointer is not defined anywhere, so drawing a line to some other point
makes little sense. To help with that, we can make use of the function moveTo , which
moves the drawing pointer without drawing anything.
Finally, any calls to lineTo only set the points in memory. In order to eventually
draw the line, we need to make a quick call to the stroke function. Once this call is
made, whatever attributes are currently set (such as line width and stroke style), will
be drawn. Thus, changing line properties before actually stroking the line does little
good, and can negatively influence performance.
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// This call is completely useless
ctx.strokeStyle = "#c0c";