SOURCE

window.onload = () => {
    var canv = document.getElementById('canv');
    canv.height = canv.width;
    var context = canv.getContext('2d');

    context.fillStyle = 'white';
    context.fillRect(0,0,100,100);

    context.fillStyle = 'black';
    context.fillText('width '+canv.width, 10, 10);

    var center = canv.width/2;
    var r = center - 10;
    var l = 15;

    var gradient= context.createRadialGradient(center,center,r,center,center,1);
    gradient.addColorStop(0, '#f00');
    //gradient.addColorStop(1, '#0f0');
    gradient.addColorStop(1, '#00f');
    context.strokeStyle = gradient;
    context.lineWidth = l - 2;

    var b = 0.01;

    var i = 0;
    var s = 0;
    var r2 = 0;
    var drawArc = () => {
        r2 = r-(i*b*l);
        if (!(r2 > 1)) {
            console.log('end----');
            return;
        }
        var e = (i*b*2)*Math.PI;
        context.arc(center,center,r2,s,e);
        context.stroke();
        i++;
        s = e;
        requestAnimationFrame(drawArc);
    };
    drawArc();
}

<canvas id="canv"></canvas>

canvas{
    border: 1px solid gainsboro;
}