Bolinha com um comportamento estranho

Quando pressiono a seta para cima, a bolinha vai para baixo e só a partir do segundo clique começa a subir. O mesmo comportamento acontece quando pressiono a seta para baixo. O que pode ser?

Vou deixar o código e um vídeo abaixo.

var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');

pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);

//Definindo os eixos x e y
var x = 20;
var y = 20;

//Códigos do Teclado
var esquerda = 37;
var cima = 38;
var direita = 39;
var baixo = 40;

//Taxa de Incremento/Decremento dos eixos
var taxa = 10;

//Definindo a Função Desenha Círculo
function desenhaCirculo(x, y, raio) {

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

//Definindo a Função que Limpa a Tela
function limpaTela() {

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

//Definindo a função que Atualiza a Tela
function atualizaTela() {

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

//Definindo o ritmo da animação
setInterval(atualizaTela, 20);


function leDoTeclado(evento) {

    //Acessando as teclas pressionadas
    if(evento.keyCode == esquerda) {

        x = x - taxa;
    }

    else if(evento.keyCode == direita) {

        x = x + taxa;
    }

    else if(evento.keyCode == cima) {

        y = y - taxa;
    }

    else if(evento.keyCode == baixo) {

        y = y + taxa;
    }
}

document.onkeydown = leDoTeclado;

Vídeo: https://drive.google.com/file/d/0B63yeVAs4D_JaTI3R0lFY1RXQkU/view?usp=sharing