Solução com mudança de cor | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

<canvas width="600"  height="400"></canvas>
<body>
    <script>
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        var paleta = ['red', 'orange', 'yellow', 'green', 'lightblue', 'blue', 'indigo'];
        var i = 0;

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

        var raio = 10;

        function desenhaCirculo(evento) {
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;

            pincel.fillStyle=paleta[i];
            pincel.beginPath();

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

            if (evento.ctrlKey && raio >= 15){
                raio = raio - 5;
            }

            pincel.arc(x, y, raio, 0, 2*3.14);
            pincel.fill();

            console.log("Posição do esquerdo : " + x + ", " + y);
            console.log("Raio = " + raio)
        }

        function mudaCor (evento){
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
            if (i<=5){
                i++;
            } else {
                i = 0;
            }
            console.log("Posição do direito : " + x + ", " + y);
            return false;
        }
        tela.onclick = desenhaCirculo;
        tela.oncontextmenu = mudaCor;
    </script>
</body>