[Proyecto] CAMBIAR COLOR DE LA ESFERA | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DIBUJA CIRCULOS</title>
</head>
<body>
    <h1>dibuja circulos</h1>
    <canvas width="600" height="400"></canvas>
    <script>
        var lienzo = document.querySelector('canvas');
        var pincel = lienzo.getContext('2d');
        pincel.fillStyle = 'lightgrey';
        pincel.fillRect(0,0,600,400)
        var colores = ['blue','red','green'];
        var i = 0;

        function dibujarCirculo(evento){
            var x = evento.pageX - lienzo.offsetLeft;
            var y = evento.pageY - lienzo.offsetTop;
            pincel.fillStyle = colores[i];
            pincel.beginPath();
            pincel.arc(x,y,10,0,2*3.1416);
            pincel.fill();
        }


        function cambiarColor(){
            i++;
            if(i == colores.length){
                i=0;
            }
            return false;
        }

        lienzo.onclick = dibujarCirculo;
        lienzo.oncontextmenu = cambiarColor;

    </script>    
</body>    
</html>