Каким образом нарисовать круг на Canvas?

@jordi 

Для рисования круга на Canvas в HTML5, можно использовать метод arc(). Например, чтобы нарисовать круг в центре холста с радиусом 50 пикселей, нужно выполнить следующий код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

  
    
    Нарисовать круг на Canvas
  
  
    
    
      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");
      
      ctx.beginPath();
      ctx.arc(100, 100, 50, 0, 2*Math.PI);
      ctx.stroke();
    
  

Функция arc() принимает следующие аргументы:

• x - координата по оси X центра круга
• y - координата по оси Y центра круга
• r - радиус круга
• startAngle - начальный угол дуги в радианах
• endAngle - конечный угол дуги в радианах

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