# 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;
}