Пути

Путь — это контур, вдоль которого следует перо, оставляя след. Путь может включать в себя различные виды штрихов: прямые линии, дуги, прямоугольники и т.д.

Рассмотрим два метода, предназначенные для создания путей и их закрытия:

• beginPath(). Начинает новую фигуру.
• closePath(). Закрывает путь, добавляя прямую линию между текущей точкой и исходной точкой пути.

Методы визуализации путей на холсте:

• stroke(). Визуализирует путь в виде контура.
• fill(). Визуализирует путь в виде залитой цветом фигуры.
• clip(). Определяет область обрезки для контекста. Данный метод позволяет задать область обрезки произвольной формы, создав маску. Всё, что остается за пределами маски, на странице не отображается.

function initiate(){
  var elem = document.getElementById('canvas');
  var canvas = elem.getContext('2d');
  canvas.beginPath();
  // Здесь пути
  canvas.stroke();
}
addEventListener("load", initiate);

Данный код не создает никаких рисунков. Он лишь сигнализирует о созда-нии путей.

Для описания путей и создания реальной фигуры предназначены следующие методы:

• moveTo(x, y). Перемещает кончик пера в указанную позицию.
• lineTo(x, y). Создает отрезок между двумя точками: текущей позицией (например, определенной с помощью метода moveTo) и точкой с координатами x и y.
• rect(x, y, width, height). Создает прямоугольник, который не сразу визуализируется на холсте, а становится частью пути.
• arc(x, y, radius, startAngle, endAngle, direction). Создает дугу или окружность с центром в точке x, y, радиусом и угловым значением объявленным в атрибутах. Последний аргумент — это булево значение, задающее направление рисования: по часовой стрелке или против нее.
• quadraticCurveTo(cpx, cpy, x, y). Создает квадратичную кривую Безье, начинающуюся в верхней позиции пера и заканчивающуюся в позиции с координатами x и y. Атрибуты cpx и cpy — это контрольные точки, управляющие формой кривой.
• bizierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y). Аналогичен предыдущему, но имеет два дополнительных аргумента, позволяющих определить кубическую кривую Бизье.

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

function initiate(){
  var elem = document.getElementById('canvas');
  var canvas = elem.getContext('2d');
  canvas.beginPath();
  canvas.moveTo(100, 100);
  canvas.lineTo(200, 200);
  canvas.lineTo(100, 200);
  canvas.closePath();
  canvas.stroke();
}
addEventListener("load", initiate);

Чтобы нарисовать залитый цветом треугольник, необходимо вместо метода stroke() использовать  метод fill().

canvas.fill();