• Utilizei o exercício anterior pra melhorar o atual , inserindo também as alternâncias de cores , apertando o direito altera a cor e pressionado o shift desenha o bolão ; )

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

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    var cores = ['blue','yellow','green']

    var corContar = 0

    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);



        function desenhaCirculo(evento) {

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

                function mudaCor (){

                    corContar ++ ;

                    if(corContar == 3){

                    corContar = 0
                     }
                     alert("Cor alterada para  " + cores[corContar])
                    return false; 
                    }

                        if (bolao) {

                        pincel.fillStyle = cores[corContar];
                        pincel.beginPath();
                        pincel.arc(x, y, 20, 0, 2 * 3.14);
                        pincel.fill();
                        console.log(x + ',' + y);
                                } else{

                                    pincel.fillStyle = cores[corContar];
                                    pincel.beginPath();
                                    pincel.arc(x, y, 10, 0, 2 * 3.14);
                                    pincel.fill();
                                    console.log(x + ',' + y);
                                }



                 tela.oncontextmenu = mudaCor;
                }

                tela.onclick = desenhaCirculo;

</script>