Edit Question - KnowledgeHub

Title Body

I'm currently working on a heatmap.js fix and I was wondering whether anyone knows if it's possible to achive the following effect with <canvas> 's 2d rendering context. 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 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 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) Have a look at the following gist , by executing it in your console you can see the problem. Expected behaviour would be: Darkest areas are the gradients centers, the overlapping area of the two gradients merges but doesn't add up. 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: draw first gradient use compositeOperation 'destination-out' draw second gradient -> substracts overlapping area from the first gradient use compositeOperation 'source-over' draw second gradient again But unfortunately I didn't find a combination that worked. I'd love to hear your feedback, thanks in advance! 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.

Tags (comma-separated) Cancel