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

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:

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.

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