[Duda] Sale error

e visto que muchos tienen el error similar, sin embargo segun el codigo que da en lo que nos enseña todo esta igual incluso en las mismas lineas pero sigue con el error, vi la solucion de algunos y muy buenas, hay alguna manera que funcione el codigo tal y como el lo coloco me sale error en la variable var x = evento.pageX - pantalla.offsetLeft; dice no estar definida la verdad ya me hice un lio

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

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");        
    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0,0,600,400); 

    var radio = 10;
    var xAleatorio;
    var yAleatorio;

    function disenharCircunferencia(x,y,radio, color){
        pincel.fillStyle = color;
        pincel.beginPath();
        pincel.arc(x,y,radio,0,2*Math.PI);
        pincel.fill();
    }    

    function limpiarPantalla(){

        pincel.clearRect(0,0,600,400);

    }

    var x = 0


    function disenharObjetivo(x,y){

        disenharCircunferencia(x,y,radio + 20,"red");
        disenharCircunferencia(x,y,radio + 10,"white");
        disenharCircunferencia(x,y,radio,"red");
    }


    function sortearPosicion(maximo){

        return Math.floor(Math.random()*maximo);
    }



    function actualizarPantalla(){

        limpiarPantalla();
        xAleatorio = sortearPosicion (600);
        yAleatorio = sortearPosicion (400);
        disenharObjetivo(xAleatorio,yAleatorio);
        x++;
    }

    setInterval(actualizarPantalla,1000);

    function disparar(event){

        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;

        if ((x < xAleatorio + radio) &&
            (x > xAleatorio - radio) &&
            (y < yAleatorio + radio) &&
            (y > yAleatorio - radio) ) {
            alerta("Tiro Certero");
        }
    }

    pantalla.onclick = disparar;



</script>