title: Draw overlap of 3 circles on a canvas
body: <p>I need to draw the following image on an HTML5 canvas without a temporary canvas:</p>
  <p><img src="https://i.stack.imgur.com/1JkF1.png" alt="enter image description here" /></p>
  <p>With a temporary canvas it's easy, because I can handle the overlaps independently like you can see here:</p>
  <p><strong><a href="http://jsfiddle.net/ZaFkU/1/" rel="nofollow noreferrer">Check this jsFiddle</a></strong>.</p>
  <pre><code>// init
  var canvas = document.getElementById('canvas');
  var tempCanvas = document.getElementById('tempCanvas');
  var ctx = canvas.getContext('2d');
  var tempCtx = tempCanvas.getContext('2d');
  
  // draw circle function
  var drawCircle = function( c, color ) {
    ctx.beginPath();
    ctx.arc( c.x, c.y, 50, 0, 2 * Math.PI, false );
    ctx.fillStyle = color;
    ctx.fill();
  }
  
  // draw overlap function
  var drawOverlap = function( c1, c2, color ) {
    tempCtx.clearRect( 0, 0, 300, 300 );
    // first circle
    tempCtx.globalCompositeOperation = 'source-over';
    tempCtx.beginPath();
    tempCtx.arc( c1.x, c1.y, 50, 0, 2 * Math.PI, false );
    tempCtx.fillStyle = color;
    tempCtx.fill();
    // second circle
    tempCtx.globalCompositeOperation = 'destination-in';
    tempCtx.beginPath();
    tempCtx.arc( c2.x, c2.y, 50, 0, 2 * Math.PI, false );
    tempCtx.fill();
    // draw on main canvas
    ctx.drawImage( tempCanvas, 0, 0 );
  }
  
  // circle objects
  var c1 = { x:100, y: 200 };
  var c2 = { x:180, y: 200 };
  var c3 = { x:140, y: 140 };
  
  // draw background
  ctx.beginPath();
  ctx.rect( 0, 0, 300, 300 );
  ctx.fillStyle = 'black';
  ctx.fill();
  
  // draw circles
  drawCircle( c1, 'grey' );
  drawCircle( c2, 'white' );
  drawCircle( c3, 'white' );
  
  // draw overlaps
  drawOverlap( c1, c2, 'red' );
  drawOverlap( c1, c3, 'blue' );
  drawOverlap( c2, c3, 'blue' );
  </code></pre>
  <p>Do you know a way to draw this without a second canvas? Thanks a lot.</p>
  <hr />
  <h2>EDIT:</h2>
  <p>I solved it thanks to @user13500. There are still ugly borders but it's very fast:</p>
  <p><strong><a href="http://jsfiddle.net/USt7C/" rel="nofollow noreferrer">Check this jsFiddle</a></strong></p>