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

Для рисования прямоугольников доступны следующие методы:

• fillRect(x, y, width, height) предназначен для рисования прямоугольника залитого цветом. Верхний левый угол фигуры будет находиться в точке заданной атрибутами x и y.
• strokeRect(x, y, width, height) аналогичен предыдущему, но создает пустой, не залитый цветом, прямоугольный контур.
• clearRect(x, y, width, height) предназначен для вычитания прямоугольной области, работает как прямоугольный ластик.

Применяя эти методы, нарисуем прямоугольник:

function initiate(){
  var elem = document.getElementById('canvas');
  var canvas = elem.getContext('2d');
  canvas.strokeRect(100, 100, 120, 120);
  canvas.fillRect(110, 110, 100, 100);
  canvas.clearRect(120, 120, 80, 80);
}
addEventListener("load", initiate);