How can I clear an arc or circle in HTML5 canvas?

Question

I found that there\'s a clearRect() method, but can\'t find any to clear an arc (or a full circle).

Is there any way to clear an arc in canvas?

Answer 1

Make sure to call beginPath()

function animate (){
 requestAnimationFrame(animate)

  c.clearRect(0,0,canvas.width,canvas.height); 

  c.beginPath();
  c.arc(x,y,40,0,Math.PI * 2,false); 
  c.strokeStyle='rgba(200,0,0,1)';
  c.stroke();

 c.fillStyle ='rgba(0,0,0,1)';
 c.fillRect(x,y,100,100);
 x++


} animate()

Credit to @Gabriele Petrioli in this answer: Why doesn't context.clearRect() work inside requestAnimationFrame loop?