1. HTML5 Canvas Tutorial
2. HTML5 Canvas Overview
3. HTML5 Canvas: Stroke and Fill
4. HTML5 Canvas: Rectangles
5. HTML5 Canvas: clearRect()
6. HTML5 Canvas: Paths
7. HTML5 Canvas: Gradients
8. HTML5 Canvas: Shadows
9. HTML5 Canvas: Text
10. HTML5 Canvas: Images
11. HTML5 Canvas: Composition
12. HTML5 Canvas: Transformations
13. HTML5 Canvas: State + State Stack
14. HTML5 Canvas: toDataURL()
15. HTML5 Canvas: Pixel Manipulation
16. HTML5 Canvas: Animation

Whenever drawing shapes on an HTML5 canvas, there are two properties you need to set:

1. Stroke
2. Fill

The stroke and fill determines how the shape is drawn. The stroke is the outline of a shape. The fill is the contents inside the shape.

Here is an example rectangle drawn with blue stroke, and green fill (actually it is two rectangles):

Here is the code that drew these two boxes:

// 1. wait for the page to be fully loaded.
window.onload = function() {
    drawExamples();
}


function drawExamples(){

    // 2. Obtain a reference to the canvas element.
    var canvas  = document.getElementById("ex1");

    // 3. Obtain a 2D context from the canvas element.
    var context = canvas.getContext("2d");


    // 4. Draw grahpics.
    context.fillStyle = "#009900";
    context.fillRect(10,10, 100,100);

    context.strokeStyle = "#0000ff";
    context.lineWidth   = 5;
    context.strokeRect(10,10, 100,100);
}

Notice how the stroke style and fill style are set separately, using the strokeStyle and fillStyle properties of the 2D context.

Also notice how the width of the stroke (the outline) of the blue rectangle is set using the lineWidth property. The lineWidth is set to 5, which means that the line width of the outlined rectangle will be 5.

Finally, notice how the 2D context is instructed to either draw a filled rect or a stroked rect.