User Interaction and the HTML5 APIs - HTML5 Mastery: Semantics, Standards, and Styling - page 306

To set the style properties, set the value equal to a quoted CSS-style color code, such
as #00000 for black. The lineWidth property takes a number that specifies the width
in pixels. To fill the entire canvas with a solid rectangle, you'd specify a starting point
of 0, 0 (the upper-left point) and a width and height the same as the canvas width and
height. Adding an outlined rectangle on top of that would give us the following:
…
canvas = document.getElementById( "canvas" );
context = canvas.getContext( "2d" );
// the color of the fill
context.fillStyle = "#cccccc";
// the color of the outline
context.strokeStyle = "#999999";
// the width of the outline
context.lineWidth = 5;
// fill the canvas area with a rectangle
context.fillRect( 0, 0, canvas.width, canvas.height );
// outline a rectangle inside the canvas borders
context.strokeRect( 30, 30, 200, 100 );
…
Add this code to the content of the init() function in script.js in the can-
vas/js directory to see it in action! The canvas uses a Cartesian coordinate system
with an inverted y-coordinate. This means every pixel on the canvas can be specified by
an x and y value, where x is the number of pixels from the left side of the canvas area
and y is the number of pixels from the top side of the canvas area. For instance, an x, y
coordinate of 30, 30, would specify a location 30 pixels from the left side and 30 pixels
from the top side of the canvas area ( Figure 7-7 ) .