Dilution in canvas

[Marcee]

I'm drawing simple circles, but we need to blur them, each with different intensity, and this is the example of the code:

    function DrawBubbles(){
        var bubbles = document.getElementById('bubbles'),
            ctx = bubbles.getContext('2d');
        ctx.fillRect(0, 0, bubbles.width, bubbles.height);
    function _DrawRound(x, y, radius, blur){
        ctx.fillStyle  = 'rgb(255, 255, 255)'; 
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2, true);
        ctx.fill();
    }

    _DrawRound(100, 100, 50, 1);
    _DrawRound(150, 200, 20, 5);
}

https://jsfiddle.net/j44mj752/

[zymir]

The blushing of pictures is considered to be pixel, by recalculating the luminance in channels r,g,b with neighbors' count. The distance of the peaks taken into account from the current, weights, etc. That's good, for example. http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html ♪

In general, all the pics of the images are crossed. I mean, you'd have to be ineffective in considering the blurry of each of the circles in a separate " layer " in individual canvas and then adding the brightness to the general layer.

A separate question is putting one ball on another. Does it add up? Maybe a closer ball has some intransigence and masks more remote balls? Are the lights broken? Options mass, come to simulate transparent materials and raesing: )

In a simple case, the white circles on the black background can not count the blurry but simulate it by drawing many circles of close radius with reduced transparency:

function DrawBubbles() {
  var bubbles = document.getElementById('bubbles'),
    ctx = bubbles.getContext('2d');
  ctx.fillRect(0, 0, bubbles.width, bubbles.height);
function _DrawRound(x, y, radius, blur) {

var i, alpha, r;

if (blur) {

for (i = 0; i < blur; i++) {

r = radius - (blur / 2) + i;

if (r <= 0) continue;

alpha = Math.pow((blur - i) / blur, 4);

ctx.fillStyle = 'rgba(255,255,255,' + alpha + ')';

ctx.beginPath();

ctx.arc(x, y, r, 0, Math.PI * 2, true);

ctx.fill();

}

} else {

ctx.fillStyle = 'rgb(255,255,255)';

ctx.beginPath();

ctx.arc(x, y, radius, 0, Math.PI * 2, true);

ctx.fill();

}

}
_DrawRound(100, 100, 50, 14);

_DrawRound(150, 200, 20, 10);

_DrawRound(185, 145, 70, 40);

for (var i = 0; i < 10; i++) _DrawRound(35 + 45 * i, 290, 16, 8 * i);

}

DrawBubbles();

<canvas height="320" width="480" id="bubbles"></canvas>