title: How to fill the 'opposite' shape on canvas?
body: <p>Say I have a circle (an arc) on HTML5 canvas. I can just fill it like this:</p>
  
  <pre><code>ctx.arc(100, 100, 50, 0, 2 * Math.PI);
  ctx.fill();
  </code></pre>
  
  <p>It works a treat. However, how can one fill the opposite area? Now it's white with a black circle, but I'd like it to be along the lines of the following image (on which white is the background color and black is the filling color):</p>
  
  <p><img src="https://i.stack.imgur.com/NXod4.png" alt="opposite area"></p>
  
  <p>I know I could just use a black background and paint a white circle, but the background can be anything (all kinds of things have been drawn there before, so just swapping colors is not possible).</p>
  
  <p>Another thing is that not the complete canvas should be filled, but rather a square with an circle canceled out.</p>
  
  <p>I was thinking of a <a href="https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html" rel="noreferrer"><code>globalCompositeOperation</code></a> but it does not seem to fit my needs as none of them act according to what I need.</p>
  
  <p>So, how can I accomplish filling the 'opposite' area like in the example image?</p>