title: deleting a circle made in HTML5 Canvas
body: <p>I've made a canvas where I draw shapes on. When I want to delete them, I basically create the same shape again but it's white, so I don't delete any other shapes (saved the x and y coordinate, so nothing to worry there)</p>
  
  <pre><code>ctx.fillStyle="#FFFFFF";
  ctx.strokeStyle="#FFFFFF";
  
  ctx.beginPath();
  ctx.arc(x, y, 40, 0, 2 * Math.PI);
  ctx.fill();
  </code></pre>
  
  <p>The problem is that on some shapes there is still a remaining black rest, that I can't get rid of (it's even worse on other shapes)</p>
  
  <p>What Am I missing?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  
  ctx.beginPath();
  ctx.arc(50,50 , 40, 0, 2 * Math.PI);
  ctx.fill();
            
  ctx.fillStyle="#FFFFFF";
  ctx.strokeStyle="#FFFFFF";
        
  ctx.beginPath();
  ctx.arc(50,50 , 40, 0, 2 * Math.PI);
  ctx.fill();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="myCanvas" width="1000" height=600 style="border: 1px solid #000000;"&gt;
  &lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>EDIT: <a href="https://jsfiddle.net/sfj5y091/3/" rel="nofollow noreferrer">https://jsfiddle.net/sfj5y091/3/</a></p>
  
  <p>EDIT 2: 
  I solved this problem in the end, by completely redrawing all the shapes after one shape was deleted in the system, which even enabled the deletion of shapes that overlapped without destroying the other shape</p>