单独的一个canvas标记只是在页面中定义了一块矩形区域，并无特别之处。开发人员只有配合使用javascript脚本，才能够完成各种图形、线条以及复杂的图形变换操作。与基于SVG实现同样绘图效果来比较，canvas绘图是一种像素级别的位图绘图技术，而SVG则是一种矢量绘图技术。
使用canvas和javascript绘制一个矩形，可能会涉及一个或多个方法，如下表所示：
（1）编写代码如下图所示，在<body>标签中加入以下代码。
（2）在浏览器中打开文件，预览效果图如下所示，可以看到网页中，在一个蓝色边框中显示了一个蓝色长方形。
小提示：上面代码中，首先定义一个画布对象，其id名称为myCanvas，其高度和宽度为500像素，并定义了画布边框显示样式。在javascript代码中，首先获取画布对象，然后使用getcontext获取当前2D的上下文对象。并使用fillrect绘制一个矩形。其中涉及一个fillstyle属性，fillstyle用于设置填充的颜色、透明度等。如果设置为“rgb（200,0,0）”，则表示一个颜色，不透明；如果设置为“rgba（0,0,200,0.5）”，则表示颜色为一个颜色，透明度为50%。