在HTML5画布元素上最容易绘制的形状之一是矩形。我们可以使用2D上下文函数" fillRect()"和" strokeRect()"来实现。这是一个简单的示例：

var canvas  = document.getElementById("ex1");
var context = canvas.getContext("2d");

context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);

context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120,110);

fillRect()

函数fillRect()绘制一个填充的矩形，该矩形由左上角，宽度和高度分隔。

请记住，画布坐标系始于画布的左上角0,0，然后x向右增加，而y向下递增。这是法线坐标系的反向，其中y向上增加。

4个参数(x，y，宽度，高度)被传递给fillRect()函数。这是一个例子：

var x = 10;
var y = 10;
var width  = 100;
var height = 100;

context.fillRect(x, y, width, height);

矩形是黑色的，因为该示例未设置2D上下文的fillStyle属性。

strokeRect()

strokeRect()函数绘制矩形的轮廓，而不填充它。矩形由左上角坐标(x，y)以及矩形的宽度和高度定界。

这是一个代码示例：

var x = 10;
var y = 10;
var width  = 100;
var height = 100;

context.strokeRect(x, y, width,height);

行宽

我们可以使用2D上下文的lineWidth属性设置描边矩形的线宽。方法如下：

var x = 10;
var y = 10;
var width  = 100;
var height = 100;

context.lineWidth = 4;
context.strokeRect(x, y, width, height);

矩形颜色

我们可以使用2D上下文的" fillStyle"或者" strokeStyle"属性设置绘制矩形的颜色。这是第一个示例，这些设置以粗体显示：

var canvas  = document.getElementById("ex1");
var context = canvas.getContext("2d");

context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);

context.lineWidth   = 4;
context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120,110);