這一篇很快來看看如何描繪矩形 ...
描繪矩形必須預先透過rect() 定義其座標位置還有長寬，所需的語法如下：
context.rect(x, y, w, h);前兩個參數代表所要描繪的矩形左上角的座標位置，w 則是矩形的寬度，h 則是矩形的高度，此定義所對應的矩形如下：
完成定義之後，接下來再調用stroke() 方法，即可將矩形畫出，來看以下的程式與網頁內容配置：
<!DOCTYPE html >
<html >
<head>
<title></title>
<script>
window.onload = function () {
var c = document.getElementById('pcanvas');
var context = c.getContext('2d');
context.rect(60, 60, 400, 200);
context.stroke();
}
</script>
</head>
<body>
<canvas id="pcanvas"
style="background:silver;"width="720" height="320" ></canvas>
</body>
</html>最後得到以下的網頁結果：
