title: How to create a canvas circle image with a cut on right side using context arc method?
body: <p>I want to create a canvas circle image using context arc method. Right now I am using below code and it creates whole round image (Left Side Image) but I want image with a cut on right side (Right Side Image).</p>
  
  <p><a href="https://i.stack.imgur.com/PT5tv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PT5tv.jpg" alt="enter image description here"></a></p>
  
  <p>Code : </p>
  
  <pre><code>&lt;div class="cv_prog_bar_round" id="cv_prog_bar_round" data-percent="10"&gt;&lt;/div&gt;
      &lt;script&gt;
          var el = document.getElementById('cv_prog_bar_round'); // get canvas
          var options = {
              percent:  el.getAttribute('data-percent') || 0,
              size: el.getAttribute('data-size') || 135,
              lineWidth: el.getAttribute('data-line') || 20,
              rotate: el.getAttribute('data-rotate') || 0
          }
  
          var canvas = document.createElement('canvas');
          var span = document.createElement('span');
          canvas.id='canvasbar';
          canvas.style='display: block;position:absolute;top:0;left:15px;';
  
          span.id='spanbar';
          span.style='color:#ff9a00;display:block;line-height:135px;text-align:center;width:135px;font-family:sans-serif;font-size:20px;font-weight:100;margin-left:20px;';
  
          span.textContent = options.percent + '%';
          if (typeof(G_vmlCanvasManager) !== 'undefined') {
                  G_vmlCanvasManager.initElement(canvas);
          }
          var ctx = canvas.getContext('2d');
          canvas.width = canvas.height = options.size;
  
          el.appendChild(span);
          el.appendChild(canvas);
  
          ctx.translate(options.size / 2, options.size / 2); // change center
          ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg
  
          var radius = (options.size - options.lineWidth) / 2;
          var drawCircle = function(color, lineWidth, percent) {
              percent = Math.min(Math.max(0, percent || 1), 1);
              ctx.beginPath();
              ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
              ctx.strokeStyle = color;
              ctx.lineCap = 'square'; // butt, round or square
              ctx.lineWidth = lineWidth
              ctx.stroke();
          };
          drawCircle('#E2E3CA', options.lineWidth, 100 / 100);
          if(options.percent&gt;0){
              drawCircle('#ff9a00', options.lineWidth, options.percent / 100);
          }
  
          var canvasData = canvas.toDataURL("image/png");
  
      &lt;/script&gt;
  </code></pre>
  
  <p>So if anybody can help me out then I'll be very thankful to him.
  Thanks</p>