a var X e Y estão dando undefined

a var x e y que estão atreladas ao evento do mouse estão dando undefined por algum motivo, tentei encontrar o erro por uma hora e nada, tempo de estudo foi por agua abaixo por causa desse erro, se alguém conseguir me ajudar ficarei grato.

<meta charset="utf-8">
<canvas width="2000"height="900" ><canvas>

<script>


    var tela=document.querySelector("canvas");
    var pincel=tela.getContext("2d");
    pincel.fillStyle="lightyellow"
    pincel.fillRect(0,0,2000,900)
    var desenha=false



    function desenhaCirculo(evento){

        if(desenha){
            var X= evento.pageX 
            var Y= evento.pageY 
            pincel.fillStyle = "blue";
            pincel.beginPath();
            pincel.arc(X, Y, 10, 0, 2 * 3.14);
            pincel.fill();



        }
        console.log(X+','+Y)
    }

    function desenha(){
        desenha=true
    }
    function naoDesenha(){
        desenha=false
    }




    tela.onmousemove=desenhaCirculo;

    tela.onmousedown= desenha;
    tela.onmouseup=    naoDesenha;




</script>