在HTML5中插入一个Canvas元素，如下：
<canvas id="mycanvas"></canvas>
要想在该画板上进行操作，则需要先取得其执行上下文context，
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
取得目标画板 canvas 的执行上下文 context 之后，通过画图 API 进行画图操作。假设这里想要在canvas 上画出三个由不同颜色填充的矩形，实现如下：
context.fillRect(5, 5, 145, 145);
context.fillStyle = "rgb(0, 162, 232)"; //指定填充色
context.fillRect(40, 55, 145, 145);
context.fillStyle = "rgba(255, 0, 0, 0.2)";
context.fillRect(75, 105, 145, 145);
该段代码的目标实现效果为：
但，理想是丰满的，现实却很骨感。实现显示效果为：
为什么会这样呢？肯定是由哪里不对！事实上问题也不难，就是 Canvas 元素的默认宽度为 300px ，默认高度为 150px 。在上面的图形中，其高度超出了其默认高度值，而又没有给canvas 设置新的高度，所以超出的部分就没有显示出来。为了正常显示目标效果图像，则需要重新设置其宽度和高度值。在这里可以通过三种方法去设置Canvas 的width, height 属性值。
- 直接在 <canvas> 元素中设置，如下：
<canvas width="300" height="300"></canvas>
注意，这里不是使用 style=”width:300px; height:300px“ 去设置。
- 使用 canvas 的属性值设置，如下：
canvas.width = 300;
canvas.height = 300;注意，这里设置值时不需要带单位。
- 使用 setAttribute() 方法设置，如下：
canvas.setAttribute("width", 300);
canvas.setAttribute("height", 300);
另外，可以通过两个常量值去设置其宽度和高度，使其等于屏幕的宽度和高度，分别为 screen.availWidth 和 screen.avail.Height 。
