praticando_teclaSHIFT_teclaALT_BotãoDIREITOMOUSE

<canvas width="600" height="400"> </canvas>




<script>

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

            pincel.fillStyle = "black";                 
            pincel.fillRect(0, 0, 600, 400);             



        var cores = ["white", "blue", "red","yellow"]
        var posicaoCor = 0 ;
        var raio = 10;

    function desenhaCirculo (evento){


         var x = evento.pageX - tela.offsetLeft;         
         var y = evento.pageY - tela.offsetTop;             


          if (evento.shiftKey && evento.altKey) {

            alert('Apenas uma tecla é permitida, por favor aperte 1.');

         } else if(evento.shiftKey && raio + 10 <= 40) {
            raio = raio + 10;

         } else if(evento.altKey && raio - 5 >= 10) {
            raio = raio - 5;

         }    


        console.log (evento);

        pincel.fillStyle = cores[posicaoCor] ;
        pincel.beginPath();                                 
        pincel.arc (x,y,raio,0, 2 * 3.14);    
        pincel.fill ();

    }

    function mudaCor (){

        posicaoCor++;

            if (posicaoCor > 3){
                posicaoCor = 0;
            }

        return false;

    }


    tela.onclick = desenhaCirculo;  
    tela.oncontextmenu = mudaCor;  

</script>