Movimentando o circulo pelas teclas (No fim é parecido com o jogo da cobrinha) | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Passei um tempão pensando como fazer já que descrição não foi mais clara pedindo um jogo da cobrinha usando um círculo(parecido). achava que estava fazendo errado já que a bolinha desaparecia.

 <html lang="pt-br">
   <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Movimentação</title> 
   </head>
   <body>
   <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 x = 20;
    var y = 20;
    var esquerda = 37;
    var cima = 38;
    var direita = 39;
    var baixo = 40;

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

function atualizaTela() {

    limpaTela();
    desenhaCirculo(x, y, 10);
}

setInterval(atualizaTela, 20);

function leDoTeclado(evento) {

    if(evento.keyCode == esquerda) {
        x -= 10;
    }else if(evento.keyCode == direita) {
        x += 10;
    }else if(evento.keyCode == cima) {
        y -= 10;
    }else if(evento.keyCode == baixo) {
        y += 10;
    }
    console.log(x);
    console.log(y);

}
document.onkeydown = leDoTeclado;
</script>
</body>
</html>