Boa tarde pessoal. Segue o código aumentar bolinha. Coloquei um botão para ficar mais fácil recarregar e fazer testes com o código, mas gostaria de que sua posição fosse em cima do canvas, alguém poderia me ajuda com isso? Abraço!!

<meta charset="UTF-8">

<input type="button" value="Recarregar" onClick="window.location.reload()">

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

<script>



        var tela = document.querySelector('canvas'); // seleciona o canvas

        var pincel = tela.getContext('2d'); // seleciona o formato 2D

        pincel.fillStyle ="grey"; // fundo do canvas recebe cinza

        pincel.fillRect(0, 0, 600, 400); // determinar posição e tamanho do canvas

        var cores = ["blue","red","green","black"] // cria array cores, definindo as cores que serão alteradas

        var corInicial = 0; //determina que a cor inicial será a que esta na posição 0


        function desenhaCirculo(evento) {

            var x = evento.pageX - tela.offsetLeft; // determina posição x do clique do mouse

            var y = evento.pageY - tela.offsetTop; // determina posição y do clique do mouse

            var raio = 10;

            console.log(x + "," + y);


            if (evento.shiftKey) {

                raio = raio + 20;
            }

            pincel.fillStyle = cores[corInicial] // determina a primeira cor ao clique do mouse

            pincel.beginPath(); // começa desenhar o circulo

            pincel.arc(x, y, raio, 0, 2* Math.PI); // desenha o circulo ,  necessário criar função para alterar valor de "10" para "30"ao apertar shift
            //shift pressionada = true, ou shift não pressionada = false

            pincel.fill(); // preenche o circulo com a cor inicial            

        }

        tela.onclick = desenhaCirculo; // executa a função desenhaCirculo ao clique do mouse

        function mudaCor() {

            corInicial++; // acrescenta contador + 1 a cor inicial

            if (corInicial >= cores.length) { // le todo o comprimento do array (lista)
                corInicial = 0 // retorna para a cor inicial
            }

            return false;

       }  


        tela.oncontextmenu = mudaCor;



</script>