title: Animate a Fill Circle like pie chart using Canvas
body: <p>Basically I want to be able to Fill a Circle using canvas, but it animate like pie chart and mask to show new image in circle.
  My canvas knowledge isn't amazing, Here is an image to display what i want.
  <a href="https://i.stack.imgur.com/IL4PO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IL4PO.jpg" alt="enter image description here"></a>
  an anyone shed some light on how to do it?
  Here is a fiddle of what I've managed</p>
  
  <pre><code>    var canvas = document.getElementById('Circle');
        var context = canvas.getContext('2d');
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 80;
              var full = radius*2;
              var amount = 0;
              var amountToIncrease = 0.1;
        function draw() {
        context.beginPath();
        context.arc(centerX, centerY, radius, 0, amount * Math.PI, false);
        context.fillStyle = '#13a8a4';
        context.fill();
        context.lineWidth = 10;
        context.strokeStyle = '#000000';
        context.stroke();
      amount += amountToIncrease;
      if (amount &gt; full) amount = 0; // restart
  }
  draw();
  // Every second we'll fill more;
  setInterval(draw, 100);
  </code></pre>