EXECUÇÃO INESPERADA

Não entendo qual é o meu problema com a função desenhaCirculo: obtenho mensagem de erro na hora de declaras as variáveis x e y.

<h1> O pulso ainda pulsa... </h1>
<meta charset = "UTF-8">

<canvas width="600" height="400" > </canvas>
<br>
<br>
<input type = "number">
<button> Digite o valor do raio </button>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    var raio = document.querySelector('input');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);


    // Valida os valores do raio
    function validaRaio(){
        if(raio.value<20 || raio.value > 30){
            alert('Valor inválido! Digite um número de 20 a 30'); 
        } 
    }            

    function limpaTela() {
        pincel.clearRect(0, 0, 600, 400);
        pincel.fillStyle = 'lightgray';
        pincel.fillRect(0, 0, 600, 400);        
    }



    //Forma do círculo
    function desenhaCirculo(x, y,cor,evento) {
            validaRaio();
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
            pincel.fillStyle = cor;
            pincel.beginPath();
            pincel.arc(x, y, raio.value, 0, 2 * Math.PI);
            pincel.fill();            
        }

    tela.onclick = desenhaCirculo;

</script>