# Circle time in HTML Canvas
Circles are one of the most difficult and prestigious shapes to achieve in Canvas. No circle method is provided, instead, we must utilize the `.arc` method to achieve circle happiness.
## Code Example
- https://plnkr.co/edit/S4fNs8o1EQxJrnaOzTtL?p=preview
## Resources
- https://www.kirupa.com/html5/drawing_circles_canvas.htm
- http://webdesign.about.com/od/html5tutorials/a/draw-circles-on-html5-canvas.htm
- https://billmill.org/static/canvastutorial/ball.html
- https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>Circles are for Closers</h1>
    <canvas id="canvas" width="500" height="500"></canvas>

    <script src="script.js"></script>
  </body>

</html>
const context = document.querySelector('#canvas').getContext('2d');
context.beginPath();

// // context.arc(centerX, centerY, radius, startAngle, endAngle, isAntiClockwise);

context.arc(50, 50 , 20, 0, Math.PI/0.5);
context.fill();
context.closePath();

// 1 radian = 57.2957795 degrees
// var radians = (Math.PI/180) * degrees;
/* Styles go here */

canvas {
  width: 500px;
  height: 500px;
}