title: HTML5 Canvas globalCompositeOperation for overlaying gradients not adding up to higher intensity?
body: <p>I'm currently working on a <a href="https://github.com/pa7/heatmap.js">heatmap.js</a> fix and I was wondering whether anyone knows if it's possible to achive the following effect with <code>&lt;canvas&gt;</code>'s 2d rendering context.</p>
  
  <ul>
  <li>I have a radial gradient from black (alpha 0.5) to transparent 40pixel radius. center of the radial gradient is at x=50, y=50</li>
  <li>I have another radial gradient from black (alpha 0.5) to transparent, 40pixel radius. center of the radial gradient is at x=80, y=50</li>
  </ul>
  
  <p>The two gradients are overlapping. My problem now is: the overlapping area gets added up together resulting in a higher alpha value than the radial gradients centers and thus showing wrong data (e.g. hotter areas in a heatmap because of those additions between the gradients)</p>
  
  <p>Have a look at the following <a href="https://gist.github.com/2316563">gist</a>, by executing it in your console you can see the problem. </p>
  
  <p>Expected behaviour would be:
  Darkest areas are the gradients centers, the overlapping area of the two gradients merges but doesn't add up.</p>
  
  <p>After seeing that none of the globalCompositeOperations resulted in the expected behaviour I tried combinations of those operations.
  A way I thought it maybe would be possible was the following:</p>
  
  <ul>
  <li>draw first gradient</li>
  <li>use compositeOperation 'destination-out'</li>
  <li>draw second gradient -> substracts overlapping area from the first gradient</li>
  <li>use compositeOperation 'source-over'</li>
  <li>draw second gradient again</li>
  </ul>
  
  <p>But unfortunately I didn't find a combination that worked. I'd love to hear your feedback, thanks in advance! </p>
  
  <p>PS: I know this could be done by manipulating the pixels manually, but I was wondering whether there's an easier, more elegant and faster solution for that.</p>