<canvas width="800" height="600"></canvas>
<script>
    function dibujarCanvas(){
        pincel.fillStyle = colorCanvas[marcadorCanvas];
        pincel.strokeStyle = "black";
        pincel.fillRect(0,0,800,600);
        pincel.strokeRect(0,0,800,600);
    }
    function dibujarCirculo(x,y,radio){
        pincel.fillStyle = colorCirculo[marcadorCirculo];
        pincel.strokeStyle = "black";
        pincel.beginPath();
        pincel.arc(x,y,radio,0,2*Math.PI);
        pincel.fill();
        pincel.stroke();
    }
    function limpiarPantalla(){
        pincel.clearRect(0,0,800,600);
        dibujarCanvas();
    }
    function escribitTexto(frase){
        pincel.font = "70px Georgia";
        pincel.fillStyle = "white";
        pincel.strokeStyle = "black";
        pincel.fillText(frase,100,300);
        pincel.strokeText(frase,100,300);
    }
    function alternarColorCirculo(){
        marcadorCirculo ++;
        if (marcadorCirculo==colorCirculo.length){
            marcadorCirculo=0;
        }
        return false;
    }
    function alternarColorCanvas(){
        marcadorCanvas ++;
        if (marcadorCanvas==colorCanvas.length){
            marcadorCanvas=0;
        }
        return false;
    }
    function actualizarPantalla(){
        limpiarPantalla();
        dibujarCirculo(x,y,radio);
        escribitTexto(contadorVueltas + texto);
        if(banderaX){
            x++;
            if(x==limiteX){
                banderaX=false;
                banderaY=true;
            }
        }
        if(banderaY){
            y++;
            if(y==limiteY){
                banderaY=false;
                banderaXflip=true;
            }
        }
        if(banderaXflip){
            x = x - 1;
            if(x==radio){
                banderaXflip=false;
                banderaYflip=true;
            }
        }
        if(banderaYflip){
            y = y - 1;
            if(y==radio){
                banderaYflip=false;
                banderaX=true;
                contadorVueltas++;
            }
        }
    }
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    var radio = 90;
    var texto = " vueltas completas";
    var colorCirculo = ["blue","red","green","purple"];
    var colorCanvas = ["orange","lightgrey","lightblue","pink"];
    var x = 1 * radio;
    var y = 1 * radio;
    var limiteX = 800 - radio;
    var limiteY = 600 - radio;
    var marcadorCanvas = 0;
    var marcadorCirculo = 0;
    var contadorVueltas = 0;
    var banderaX = true;
    var banderaY = false;
    var banderaXflip = false;
    var banderaYflip = false;
    setInterval(actualizarPantalla,5);
    pantalla.onclick = alternarColorCanvas;
    pantalla.oncontextmenu = alternarColorCirculo;
</script>