wulin.comの記事紹介（www.vevb.com）：html5-canvasタグドラウング長方形。
<！doctype html>
<html>
<head>
<メタcharset = 'utf-8'>
<title> html5-canvasタグ - ドラウの長方形</title>
</head>
<body>
<canvas id = 1 width = 200 height = 200> </canvas>
<script type = text/javascript>
window.onload = function（）{
var canva = document.getElementById（ '1'）
var content = canva.getContext（ '2d'）
content.fillstyle = #ccc; //キャンバスの背景色を埋めます
content.fillrect（0、0、200、200）; //パラメーターは、それぞれx軸、y軸、幅、高さを表します
content.linewidth = 4; //境界幅
content.strokestyle = #fff; //ボーダーカラー
content.Strokerect（50,50,100,100）; //境界座標とサイズ
content.fillstyle =＃f00; //長方形の塗りつぶし色
content.fillrect（50,50,100,100）; //長方形の座標とサイズ
}
</script>
</body>
</html>