Metamorfose Ambulante;

var taxa = 10;
var trocaCor = ['green','yellow','red','blue'];
var posicao = 0;

function desenhaCirculo(x, y, raio) {

    pincel.fillStyle = trocaCor[posicao];
    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, 20);
}

setInterval(atualizaTela, 20);

document.onkeydown = function (evento) {

    limpaTela();

    posicao++
        if(evento.keyCode == esquerda && trocaCor) {
            x = x - taxa;
            posicao = 0;

        } else if(evento.keyCode == direita && trocaCor) {
            x = x + taxa;
            posicao = 1;
        } else if(evento.keyCode == cima && trocaCor) {
            y = y - taxa;
            posicao = 2;
        } else if(evento.keyCode == baixo && trocaCor) {
            y = y + taxa;
            posicao = 3;
        }        


        desenhaCirculo(x, y, 20);        
}