Meu código não funciona e não entendo o porquê

O círculo simplesmente não aparece em nenhum tamanho. A única parte que o programa roda é o retângulo cinza no fundo.Não entendo o problema na minha lógica, se alguém puder me ajudar a entender, ficaria grata!

<canvas width="600" height="400"></canvas>
<script>
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");

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

    function desenhaCirculo(evento) {
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pagey - tela.offsetTop; 
            if(evento.shiftKey == true) { 

                    pincel.fillStyle = "blue";
                    pincel.beginPath();
                    pincel.arc(x, y, 30, 0, 2 * Math.PI);
                    pincel.fill();

                    } else { 
                        pincel.fillStyle = "blue";
                        pincel.beginPath();
                        pincel.arc(x, y, 10, 0, 2 * Math.PI);
                        pincel.fill(); 
            }

    }

    tela.onclick = desenhaCirculo; 
</script>