Uni o que foi pedido com o pedido em outros desafios com a bolinha.

<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);

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);
    pincel.fillStyle = "lightgray";
    pincel.fillRect(0, 0, 600, 400);

}

var x = 50;
var y = 50;
var raio = 20;
var cores = ["blue", "red"];
var cresceDecresce = 1
var move = 1
var i = 0

function pulsa() {

    limpaTela();
    if(raio == 20) {
        cresceDecresce = 1;
        i = 0;
    } else if (raio ==  30) {
        cresceDecresce = -1;
        i = 1;
    }
    if(x == 50) {
        move = 1
    } else if(x == 575) {
        move = -1
    }

    raio = raio + cresceDecresce;
    x = x + move;
    desenhaCirculo(x, y, raio, cores[i]);
}

setInterval(pulsa, 30);

</script>