Кривые

Метод quadraticCurveTo() предназначен для создания квадратичной кривой Безье, а метод bezieCurveTo() – для рисования кубической кривой Бизье.

function initiate(){
  var elem = document.getElementById('canvas');
  var canvas = elem.getContext('2d');
  canvas.beginPath();
  canvas.moveTo(50, 50);
  canvas.quadraticCurveTo(100, 125, 50, 200);
  canvas.moveTo(250, 50);
  canvas.bezierCurveTo(200, 125, 300, 125, 250, 200);
  canvas.stroke();
}
addEventListener("load", initiate);

Ширину, вид и окончание линий можно настраивать. Для этого имеется че-тыре свойства:

• lineWidth. Определяет толщину линии.
• lineCap. Определяет форму окончания линии. Может принимать следующие значения: butt, round или square.
• lineJoin. Определяет форму соединения двух линий. Возможные значения: round, bevel и miter.
• miterLimit. Используется совместно со свойством lineJoin и определяет протяженность соединения двух линий в случае, если свойству lineJoin присвоено значение miter.

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

function initiate(){
  var elem = document.getElementById('canvas');
  var canvas = elem.getContext('2d');
  canvas.beginPath();
  canvas.arc(200, 150, 50, 0, Math.PI * 2, false);
  canvas.stroke();
  canvas.lineWidth = 10;
  canvas.lineCap = "round";
  canvas.beginPath();
  canvas.moveTo(230, 150);
  canvas.arc(200, 150, 30, 0, Math.PI, false);
  canvas.stroke();
  canvas.lineWidth = 5;
  canvas.lineJoin = "miter";
  canvas.beginPath();
  canvas.moveTo(195, 135);
  canvas.lineTo(215, 155);
  canvas.lineTo(195, 155);
  canvas.stroke();
}
addEventListener("load", initiate);