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

You can use the clearRect() method to erase a portion of the canvas (including your arc), but when you're using clearRect() with arcs or anything else that you used beginPath() and closePath() for while drawing, you'll need to handle the paths while erasing, too. Otherwise, you may end up with a faded version of your arc still appearing.

//draw an arc (in this case, a circle)
context.moveTo(x, y);
context.beginPath();
context.arc(x,y,radius,0,Math.PI*2,false);
context.closePath();
context.strokeStyle = "#ccc";
context.stroke();

//now, erase the arc by clearing a rectangle that's slightly larger than the arc
context.beginPath();
context.clearRect(x - radius - 1, y - radius - 1, radius * 2 + 2, radius * 2 + 2);
context.closePath();

Answer 2

This is a circular equivalent of clearRect(). The main thing is setting up a composite operation per @moogoo's answer.

var cutCircle = function(context, x, y, radius){
    context.globalCompositeOperation = 'destination-out'
    context.arc(x, y, radius, 0, Math.PI*2, true);
    context.fill();
}

See https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html:

Answer 3

Nope, once you've drawn something on a canvas there is no object to clear, just the pixels you've drawn. The clearRect method doesn't clear a previously drawn object, it just clears the pixels in the space defined by the parameters. You can use the clearRect method to clear the arc if you know a rectangle which contains it. This will of course clear any other pixels in the area, so you'll have to redraw them.

Edit: MooGoo has given a much better answer below

Answer 4

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?

Answer 5

There is no clearArc however you can use Composite Operations to achieve the same thing

context.globalCompositeOperation = 'destination-out'

According to MDC the effect of this setting is

The existing content is kept where it doesn't overlap the new shape.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing

So any filled shape with this mode on will end up erasing current canvas content.

Answer 6

Here's an updated fiddle for you too (uses clearRect): https://jsfiddle.net/x9ztn3vs/2/

It has a clearApple function:

block.prototype.clearApple = function() {
    ctx.beginPath();
    ctx.clearRect(this.x - 6, this.y - 6, 2 * Math.PI, 2 * Math.PI);
    ctx.closePath();
}