Введение статьи Wulin.com (www.vevb.com): прямоугольники html5-canvas drawing.
<! Doctype html>
<html>
<голова>
<meta charset = 'UTF-8'>
<Title> Html5-Canvas Tag-Draw Rectangle </title>
</head>
<тело>
<canvas id = 1 ширина = 200 высот = 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.fillstyle = #f00; // Цвет прямоугольника заполнения
Содержание.fillRect (50,50 100 100); // Прямоугольный координаты и размер
}
</script>
</body>
</html>