A largura de 350x e altura de 300y são as dimensões do primeiro retângulo verde (retângulo 1).

Já as coordenadas iniciais presumo que possam ter sido deixadas para livre escolha. 200(x) 50(y) foram, provavelmente, estimadas para que o desenho coubesse na tela de 600(x) 400(y).

Mas poderiam ser calculadas em 125(x) 50(y) para ficarem centralizadas, ou qualquer outro valor que não excedesse 250(x) e 100(y) para que o desenho não extrapolasse a tela.

Fazendo pulsar

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

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

    function limpaTela() {

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

    var raio = 20;

    var sentido = 1;

    function atualizaTela() {

        limpaTela();

        if( raio > 30) {
            sentido = -1;
        } else if (raio < 20) {
            sentido = 1;
        } 

        desenhaCirculo(150, 100, raio);
        raio = raio + sentido;
    }

    setInterval(atualizaTela, 20);

</script>