title: Circular image in a circular progress bar [CANVAS]
body: <p>I have attempted to create a circular progress bar and a circular image using canvas separately but I tried putting them together, and the result is not what I wished for. What I am hoping for is, if  45% of the progress bar is complete, then the complete part should be in the pinkish color and the rest of the stroke must be black(the 55% remaining), also the image must be circular and there must be a text in the middle of the image.</p>
  
  <p>I'm fairly new to canvases and I would very much appreciate any places I could learn canvases or any similar technologies associated with web design.</p>
  
  <p>Also I do note that there are questions related to circular progress bars and circular images using canvases, but none of them have the both of these topics combined. As a beginner at this canvas technology, I am not capable of extracting the necessary information from the other topics.</p>
  
  <p>Any help is appreciated!</p>
  
  <p>Cheers!</p>
  
  <p>[EDIT]: I must point out that I do not want any answers suggesting me to use libraries, this is a learning experience so I do not want to use libraries.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;T&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;canvas id="myCanvas" width="500" height="200"&gt;&lt;/canvas&gt;
      &lt;script&gt;
          var canvas = document.getElementById('myCanvas');
          var context = canvas.getContext('2d');
          var al = 50;
          var start = 4.72;
          var cw = context.canvas.width / 2;
          var ch = context.canvas.height / 2;
          var diff;
  
          function progressBar() {
              diff = (al / 100) * Math.PI * 2;
              context.clearRect(0, 0, 400, 200);
  
  
  
              context.fillStyle = '#000';
              context.strokeStyle = '#ff2626';
              context.textAlign = 'center';
              context.lineWidth = 10;
              context.font = '10pt Verdana';
              context.beginPath();
              context.arc(cw, ch, 55, start, diff + start, false);
              context.closePath()
              context.stroke();
              context.fillText(al + '%', cw + 2, ch + 6);
  
              var img = new Image();
  
              img.onload = function () {
                  context.beginPath();
                  context.arc(cw, ch, 50, 0, 2 * Math.PI, false);
                  context.clip(); 
                  context.closePath();
                  context.strokeStyle = '#ff2626';
                  context.lineWidth = 10;
  
                  context.stroke()
                  context.fillText(al + '%', cw + 2, ch + 6);
  
                  context.drawImage(img, 0, 0);
              };
  
              img.src =
                  "http://www.antiquiet.com/wp-content/uploads/2011/03/Free-Trapper_Remasters_The-Kills-467x311.jpg";
  
  
          }
          progressBar()
      &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>