title: html5 canvas - merge two clipping regions - James Bond Gunbarrel
body: <p>I have just started using canvas to get this kind of effect:</p>
  
  <p>"James Bond Gunbarrel View Start"
  <a href="http://www.youtube.com/watch?v=sfXazFp68cE" rel="nofollow">http://www.youtube.com/watch?v=sfXazFp68cE</a></p>
  
  <p>I managed to get almost there:</p>
  
  <p><a href="http://jsbin.com/uyaker/8/edit" rel="nofollow">http://jsbin.com/uyaker/8/edit</a></p>
  
  <p>Now as you can see I clip my canvas with two circles (At least I try to) ... but the problem is the region that overlaps is not clipped anymore ...</p>
  
  <pre><code>ctx.clearRect(0, 0, canvas.width, canvas.height);    
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(canvas.width, 0);
  ctx.lineTo(canvas.width, canvas.height);
  ctx.lineTo(0, canvas.height);
  ctx.closePath();
  ctx.moveTo(cx + r, cy);
  ctx.arc(cx, cy, r, 0, Math.PI*2, true);
  // check if to draw a fixed circle, every 200 pixels for 100 pixels
  if(goingright &amp;&amp; cx % 200 &lt; 100) {
      ctx.moveTo(cx - cx % 200 + r, cy);
      ctx.arc(cx - cx % 200, cy, r, 0, Math.PI*2, true);
  }
  ctx.closePath();
  ctx.clip();
  
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.restore();
  </code></pre>
  
  <p>Maybe this effect is possible without using clipping but give the canvas a css background-image and draw everything but the circles ... but I don't really know how to do that :/.</p>