A minha bolinha está atrás do canvas cinza. Oque eu faço?

É algo recorrente no meus códigos. Aqui meu codigo:

<canvas width=600 height=400></canvas>
        <script>
        var screen =document.querySelector('canvas');
        var brush = screen.getContext('2d');
        brush.fillStyle='grey';
        brush.fillRect(0,0,600,400);
        function drawCircle(event1) {
                const x = event1.pageX - screen.offsetLeft;
                const y = event1.pageY - screen.offsetTop;
                let raio = 10;
                if(event1.shiftKey) {
                        let raio = raio + 20};
                brush.fillStyle='blue';
                brush.beginPath();
                brush.arc(x,y,10,raio,2*3.14);
                brush.fill();
                console.log(x+","+y);
        }
screen.onclick=drawCircle;

        </script>