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

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: