alyssamichelle/canvas-course: Source code for egghead.io HTML Canvas Course

# Drawing a piece of a pie in HTML Canvas
You might think that drawing a piece of a pie possible with the `arc` method. However, in this lesson, you'll see why that isn't possible and how to draw a pie piece with the `arcTo` canvas method. `arcTo` takes `x1`, `y1`, `x2`, `y2` and `radius` to draw a nifty arc shape. You then must use the `moveTo` and `lineTo` methods to complete the beautiful piece of a pie. As a bonus, the `clearRect` method is used to demonstrate clearing the canvas!
## Code Example
- https://plnkr.co/edit/ITXUj57sEBzjVZdJdbrT?p=preview

## Resources
- https://www.w3schools.com/tags/canvas_arcto.asp

<!DOCTYPE html>
<html>

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

  <body>
    <h1>A Piece of the Pie</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.arcTo(x1,y1,x2,y2,r);
context.moveTo(100, 70); // move to this spot
context.lineTo(100, 20); // draw a vertical line
context.arcTo(150, 20, 150, 70, 50);
context.lineTo(100, 70); // draw a horizontal line

context.fill();
context.closePath();

// var i = 0;
// function loopIt() {
//   if(i++ < Math.PI*2) {
//     drawPurpleCircle(i);
//   } else {
//     i = 0;
//     context.clearRect(0, 0, 500, 500);
//     setTimeout(loopIt, 400);
//   }
// };
// loopIt();
//
//
// function drawPurpleCircle(i) {
//   context.beginPath();
//   context.arc(100, 70, 50, 0, i);
//   context.fillStyle = "rebeccaPurple";
//   context.fill();
//   context.closePath();
//   setTimeout(loopIt, 400);
// };

/* Styles go here */

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