title: Canvas clipping region and the canvas stack
body: <p>I have started working through the O'Reilly book "HTML5 Canvas." I'm in the second chapter, and one of the examples presents code which is not very well explained. Example 2-5: </p>
  
  <ol>
  <li>draw a black box</li>
  <li>push state</li>
  <li>set small clipping region in top left</li>
  <li>draw circle</li>
  <li>pop state</li>
  <li>set large clipping region </li>
  <li>draw another circle</li>
  </ol>
  
  <p>But I'm having trouble understanding some things:</p>
  
  <pre><code>context.fillStyle = 'black';
  context.fillRect(10, 10, 200, 200);
  
  context.save();
  
  context.beginPath();
  context.rect(0, 0, 50, 50);
  context.clip();
  
  context.beginPath();
  context.strokeStyle = 'red';
  context.lineWidth = 5;
  context.arc(100, 100, 100, 0, 2*Math.PI, false);
  context.stroke();
  context.closePath();
  
  context.restore();
  
  context.beginPath();
  context.rect(0, 0, 500, 500);
  context.clip();
  
  context.beginPath();
  context.strokeStyle = 'blue';
  context.lineWidth = 5;
  context.arc(100, 100, 50, 0, 2*Math.PI, false);
  context.stroke();
  context.closePath();
  </code></pre>
  
  <p>My questions:</p>
  
  <p>First, does context.clip() implicitly close the context path ("context.closePath()")? It is preceded by a context.beginPath(), and followed by another context.beginPath(). Like this:</p>
  
  <pre><code>context.beginPath();
  context.rect(0, 0, 50, 50);
  context.clip();
  context.beginPath();
  </code></pre>
  
  <p>Second, why is it necessary to push the context state? Why can't I just change the clipping region? It seems to be necessary, because it doesn't work without pushing the state. If I don't push the state and then restore it, the big blue circle does not show up, and I don't understand why.</p>