所有的图形都需要通过路径绘制，而 HTML5 Canvas 支持一种原生的图形绘制 — 矩形，并且只支持这一种。

关于绘制矩形的方法：

// 创建矩形
// x:矩形左上角的 x 坐标
// y:矩形左上角的 y 坐标
// width:矩形的宽度，以像素计
// height:矩形的高度，以像素计
context.rect(x, y, width, height)

// 绘制一个已填充的矩形
// x:矩形左上角的 x 坐标
// y:矩形左上角的 y 坐标
// width:矩形的宽度，以像素计
// height:矩形的高度，以像素计
context.fillRect(x, y, width, height)

// 绘制一个矩形的边框
// x:矩形左上角的 x 坐标
// y:矩形左上角的 y 坐标
// width:矩形的宽度，以像素计
// height:矩形的高度，以像素计
context.strokeRect(x, y, width, height)

// 清除指定的矩形区域，然后这块区域会变的完全透明。
// x:矩形左上角的 x 坐标
// y:矩形左上角的 y 坐标
// width:矩形的宽度，以像素计
// height:矩形的高度，以像素计
context.clearRect(x, y, width, height);

使用 rect(x, y, width, height) 创建矩形时，需要使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.rect(20,20,160,50);
ctx.stroke();
ctx.beginPath();
ctx.rect(20,90,160,50);
ctx.fill();

可简化为：

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.strokeRect(20,20,160,50);
ctx.fillRect(20,90,160,50);

清除指定区域：

ctx.clearRect(90, 90, 50, 25);