Overlapping Radial Gradient Clears

by Dragonseer

HTML

<canvas id="canvas" height="500" width="500"/>

CSS

*
{
    background-color:gray;
}

canvas
{
    border: 1px solid white;
}

JavaScript

var context = document.getElementById("canvas").getContext("2d");

context.fillStyle = "black";
context.fillRect(0, 0, 500, 500);    

for(var i = 0; i < 5; i++)
    {
        var x = i * 50;
        var y = 200;
        var r1 = 50;
        var r2 = 60;

        var radGrd = context.createRadialGradient(x, y, r1, x, y, r2);
        radGrd.addColorStop(0, "rgba( 0, 0, 0,  0 )");
        radGrd.addColorStop(1, "rgba( 0, 0, 0,  1 )");

        context.fillStyle = radGrd;
        context.clearRect(x - r2, y - r2, r2 * 2, r2 * 2);
        context.fillRect(x - r2, y - r2, r2 * 2, r2 * 2);
    }