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

the origin—they are displacement distances from the point specified by the first two
parameters.
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
// Clear the entire canvas
ctx.clearRect(0, 0, canvas.width,
canvas.height);
// Only clear the half inside area of the canvas
ctx.clearRect(canvas.width * 0.25,
canvas.height * 0.25,
canvas.width * 0.5, canvas.height * 0.5);
// Clear a square 100x100 at the lower right
bottom of the canvas
ctx.clearRect(canvas.width - 100, canvas.height
- 100, 100, 100);
Normally, when rendering many frames every second, we'd be calling this function to
clear out the entire canvas before drawing the next frame. Luckily, in most JavaScript
engines, this function performs fairly well; so that we don't need to worry too much
about optimizing the precise area to clear out on a regular basis.
Fill and stroke
When drawing native objects such as lines, paths, text, and other shapes, we'll deal
with the concept of strokes and fills; just as in SVG, a stroke refers to the outline of a
primitive (such as a border or sorts), and the fill is the content that covers the inside
of the shape.
The way we can change the color that is used to fill a shape, or the color used to
stroke the shape, is by assigning any color to the fillStyle or strokeStyle
properties. The color can be any string valid for a CSS color.