Utilizei essa forma para desenvolver o exercício:
<canvas width="600" height="400"></canvas>
<script>
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 atualiza () {
limpaTela();
desenhaCirculo(300, 200, auxR, 'blue');
if (crescendo) {
if (auxR <= 30) {
auxR++;
} else {
crescendo = false, diminuindo = true;
}
} else if (diminuindo) {
if (auxR >= 20) {
auxR--;
} else {
crescendo = true, diminuindo = false;
}
}
}
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
var auxR = 20;
var crescendo = true, diminuindo = false;
setInterval(atualiza, 20);
</script>