Javascript canvas clear arc

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

var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
var mouse = { x: 0, y: 0 };

document.addEventListener('mousemove', function(e) {
  mouse.x = e.pageX;
  mouse.y = e.pageY;
}, false);

window.addEventListener('resize', function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  return resize;
}(), false);

requestAnimationFrame(function looop() {
  requestAnimationFrame(looop);
  draw(context);
});

function draw(context) {
 context.clearRect(0, 0, canvas.width, canvas.height);

 // Draw the green hulk to clear
  context.beginPath();
  context.fillStyle = 'rgba(0, 255, 0, 0.5)';
  context.fillRect(0, 0, canvas.width, canvas.height);

 context.fillStyle = '#000';
 clearArc(context, mouse.x, mouse.y, 50);
}

// http://stackoverflow.com/a/12895687/1250044
function clearArc(context, x, y, radius) {
  context.save();
  context.globalCompositeOperation = 'destination-out';
  context.beginPath();
  context.arc(x, y, radius, 0, 2 * Math.PI, false);
  context.fill();
  context.restore();
}

DEMO