Olá, Italo! Tudo bem?

Antes de tudo, agradeço pela paciência em aguardar um retorno.

Nesse caso, além de if, else if e else, podemos utilizar uma outra estrutura interessante, o switch-case.

A ideia desta estrutura é determinar uma expressão que será comparada com outros valores (valores esses que determinaremos ao longo do código).

Abaixo está a sintaxe do switch-case :

switch(expressão) {
    case x:
      // bloco de código
      break;
    case y:
      // bloco de código
      break;
    default:
      // bloco de código
}

A partir da expressão que estamos trabalhando, teremos vários casos (cada um representará uma etapa de verificação, assim como ocorre nas outras estruturas condicionais).

Ao finalizar um case, geralmente adicionamos um break, determinando o fim daquele bloco. Além disso, depois de todos os cases também é possível adicionar um bloco default, que será executado somente se nenhuma das outras verificações for validada.

Ao adicionarmos o switch-case em seu código, teremos o seguinte resultado:

function leDoTeclado(evento) {

    switch (evento.keyCode) {
        case cima:
            y = y + taxa;
            break;
        case baixo:
            y = y + taxa
            break;
        case esquerda:
            x = x - taxa
            break;
        case direita: 
            x = x + taxa
            break;
    }
}

A expressão que estamos tendo como base é evento.keyCode. Desse modo, conforme pressionamos determinada tecla, serão feitas verificações a fim de encontrar em qual case o evento ocorrido melhor se encaixa.

Além disso, para deixar o programa mais sucinto. Deixo como recomendação alterar a atribuição de valores. Em Javascript, podemos somar novos valores a uma variável de duas maneiras:

y = y + taxa;

y += taxa;

A partir de um exemplo extraído do seu código, podemos analisar a diferença entre as duas maneiras. Enquanto na primeira repetimos a variável, na segunda utilizamos o operador +=, que trás o mesmo significado e une o processo de atribuição com a soma.

Após a alteração do seu código, teremos o seguinte resultado:

function leDoTeclado(evento) {

    switch (evento.keyCode) {
        case cima:
            y -= taxa;
            break;
        case baixo:
            y += taxa
            break;
        case esquerda:
            x -= taxa
            break;
        case direita: 
            x += taxa
            break;
    }
}

Ao fim, o resultado final do seu programa será:

<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

    var taxa = 12;

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

    function leDoTeclado(evento) {

        switch (evento.keyCode) {
            case cima:
                y -= taxa;
                break;
            case baixo:
                y += taxa
                break;
            case esquerda:
                x -= taxa
                break;
            case direita: 
                x += taxa
                break;
        }
    }

   document.onkeydown = leDoTeclado;

</script>

Caso tenha dúvidas após minha explicação ou ao decorrer dos seus estudos, lembre-se que você pode contar com o fórum. Ficarei super feliz em te ajudar!

Abraços e até mais!