Juntando tudo

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

<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgrey';
pincel.fillRect(0,0,600,400);

function desenhaCirculo(x, y, r){

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

}

function limpaTela() {

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

var x = 20;
var y = 20;
var r = 10;
var sentido = 1;
var diametro = 1;
var diagonal = 1;



function atualizaTela(){

    limpaTela();

    if (x>580) {
        sentido=-1
    } else if(x<20){
        sentido=1
    }


    if (r>30) {
        diametro =-1
    } else if(r<20){
        diametro =1
    }

    if (y>400) {
        diagonal =-1
    } else if(y<20){
        diagonal =1
    }



    desenhaCirculo(x,y,r);
    x= x + sentido;
    y= y + diagonal;
    r= r + diametro;

}

setInterval(atualizaTela, 20);

</script>