Databases
StackOverflow2013
Postsdbo
POHTML5 Canvas globalCompositeOperation for overlaying gradients not adding up to higher intensity?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML5 Canvas globalCompositeOperation for overlaying gradients not adding up to higher intensity?
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload