Solução com aumento de raio e 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);

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

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

            if (evento.shiftKey){
                raio = raio + 20;
            }

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

            console.log("posição do esquerdo : " + x + ", " + y);
        }

        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>