DESSA MANEIRA NUNCA FUNCIONARÁ (setInterval / clearInterval)

Estou um bom tempo estudando como loopar o código com setInterval e o clearInterval, porem sem sucesso. Talvez com algum incremento de arrays e/ou id(#) nas variáveis seja possível, mas não possuo tal conhecimento. (alerta cuidado epiléticos)

<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);
    var raio =20 


    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();

        if(raio == 30)
        {
            var voltar = setInterval(volta,100)
            clearInterval(ir)

        }
        if(raio == 20)
        {

            var ir = setInterval(vai,100)

        }
    }

    function limpaTela() {

        pincel.clearRect(0, 0, 600, 400);
    }

function vai()
{
    limpaTela()
    desenhaCirculo(300,200,raio,"red")
    raio = raio +1
}
function volta()
{
    limpaTela()
    desenhaCirculo(300,200,raio,"blue")
    raio = raio -1 
}
setInterval(vai,100)


</script>

embora tenha conseguido evoluir o código para não causar um ataque epilético em alguém

<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);
    var raio =20 

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

    function limpaTela() {

        pincel.clearRect(0, 0, 600, 400);
    }

function vai()
{
    limpaTela()
    desenhaCirculo(300,200,raio,"red")
    raio++
}
function volta()
{
    limpaTela()
    desenhaCirculo(300,200,raio,"blue")
    raio--
}

if(raio == 30)
{
    setInterval(volta,10)
}
if(raio == 20)
{
    setInterval(vai,10)
}

setInterval(volta,10)

</script>

e ate mesmo conseguido algumas repetições

<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);
    var raio =20

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

    function limpaTela() {

        pincel.clearRect(0, 0, 600, 400);
    }

function vai()
{
    limpaTela()
    desenhaCirculo(300,200,raio,"red")
    raio++
    if(raio == 60)
    {   
        clearInterval(ff)
        var gg = setInterval(volta,100)



    }
    function volta()
{
    limpaTela()
    desenhaCirculo(300,200,raio,"blue")
    raio--
    if(raio == 40)
    {
        clearInterval(gg)
        var ff = setInterval(vai,100)

    }

}

}

var ff = setInterval(vai,100)


</script>

não sou capaz de solucionar esse quebra cabeça com meu conhecimento atual. Fique a vontade para mexer no código e chegar a uma resposta. Sua ajuda é totalmente bem vinda !