每当在HTML5画布上绘制形状时，都需要设置两个属性：

• Stroke
• Fill

笔触和填充确定如何绘制形状。笔触是形状的轮廓。填充是形状内部的内容。

这是一个用蓝色笔划和绿色填充绘制的矩形示例代码：

// 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);
}

注意如何使用2D上下文的strokeStyle和fillStyle属性分别设置笔触样式和填充样式。

还要注意如何使用lineWidth属性设置蓝色矩形的笔触(轮廓)的宽度。 lineWidth设置为5，这意味着轮廓矩形的线宽将为5.

最后，请注意如何指示2D上下文绘制填充矩形或者描边矩形。