Прямоугольники на canvas

Canvas поддерживает только одну примитивную фигуру - прямоугольник. Все другие фигуры должны быть созданы комбинацией одного или большего количества контуров (paths), набором точек, соединённых в линии.

На примере, рассмотрим работу функций, с помощью которых можно создать прямоугольники;

<html>
	<head>
		<style>
			#canvas{
				background-color: darkkhaki;
			}
		</style>
		<script>
			function onLoadHandler() {
				var canvas  = document.getElementById('canvas'),
			    	    context = canvas.getContext('2d');
				context.fillRect(25,25,150,100);
				context.clearRect(45,45,110,60);
				context.strokeRect(50,50,100,50);
			}
		</script>
	</head>
	<body onload = onLoadHandler()>
		<canvas id="canvas">Обновите браузер!</canvas>
	</body>
</html>

Пример 1.

Рис. 1. Прямоугольники.

В этом примере функция:

fillRect() рисует заполненный прямоугольник;
clearRect() очищает прямоугольную область;
strokeRect() рисует контур прямоугольника.

Каждая из этих функций функций принимает 4 параметра:

fillRect(x, y, width, height)
strokeRect(x, y, width, height)
clearRect(x, y, width, height)

Где, x, y координаты положения верхнего левого угла прямоугольника в canvas (относительно начала координат); width и height ширина и высота прямоугольника.

В отличие от функций создания контуров, все три функции создания прямоугольников сразу же отображают прямоугольники на canvas.

Литература:

Mozilla - Рисование прямоугольников.

JavaScript