[Proyecto] Cambiar de color la esfera con clic derecho | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clic en Canvas</title>
</head>
<body>
    <canvas width="600" height="400"></canvas>
    <script>
        const lienzo =  document.querySelector('canvas');
        const pincel = lienzo.getContext('2d');
        const colores = ['blue','red','green'];
        let b = 0;
        pincel.fillStyle = 'gray';
        pincel.fillRect(0,0, 600,400);

        lienzo.onclick = dibujarCirculo;
        lienzo.oncontextmenu = alterarColor;     

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

        function alterarColor() {
            if(b==2){
                 b=0               
            }
            else{
                b++;
            }            
            return false;
        }        

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