HTML5 Canvas globalCompositeOperation для наложения градиентов, не увеличивающих интенсивность?

В настоящее время я работаю над исправлением heatmap.js, и мне было интересно, знает ли кто-нибудь, можно ли добиться следующего эффекта с помощью 2-мерный контекст рендеринга.

• У меня есть радиальный градиент от черного (альфа 0,5) до прозрачного радиусом 40 пикселей. центр радиального градиента находится в точках x=50, y=50
• У меня есть другой радиальный градиент от черного (альфа 0,5) до прозрачного, радиус 40 пикселей. центр радиального градиента находится в точках x=80, y=50

. Два градиента перекрываются. Теперь моя проблема заключается в следующем: перекрывающаяся область суммируется, что приводит к более высокому значению альфа, чем центры радиальных градиентов, и, таким образом, показывает неправильные данные (например,более горячие области на тепловой карте из-за этих дополнений между градиентами)

Взгляните на следующий суть, выполнив его в консоли, вы увидите проблему.

Ожидаемое поведение: Самые темные области — это центры градиентов, перекрывающиеся области двух градиентов сливаются, но не складываются.

Увидев, что ни одна из globalCompositeOperations не привела к ожидаемому поведению, я попробовал комбинации этих операций. Я думал, что это возможно, следующим образом:

• нарисовать первый градиент
• использовать составную операцию 'destination-out'
• нарисовать второй градиент -> вычесть область перекрытия из первого градиента
• использовать составную операцию ' source-over'
• снова нарисовать второй градиент

Но, к сожалению, я не нашел подходящей комбинации. Буду рад услышать ваши отзывы, заранее спасибо!

PS: Я знаю, что это можно сделать, манипулируя пикселями вручную, но мне было интересно, есть ли для этого более простое, элегантное и быстрое решение.