Não acontece nada quando eu clico no alvo

Meu codigo está quase bem parecido com o da aula, mas não acontece nada. A unica diferença é que eu criei uma arry list para guardar as informações de como eu irei montar meu alvo, pois montá-los é muito repetitivos e queria um código mais condensado.

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

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    var raio = 10;
    var ax; \\MINHA VARIAVEL DOS NUMEROS ALEATÓRIOS
    var ay; \\MINHA VARIAVEL DOS NUMEROS ALEATÓRIOS

    pincel.fillStyle = 'lightgrey';
    pincel.fillRect(0, 0, 600, 400);

    function circle(){
// GUARDEI AS INFORMAÇÕES DOS MEUS CICULOS EM UMA ARRAY 
        var circleData = [[raio,'red'],[raio+10,'white'],[raio+20,'red']];
            for(var i = 1 ;  i <= circleData.length ; i++ ){
                var datay = circleData[(circleData.length-i)];
                alvo(datay[0],datay[1]); 
\\ PASSO ESSES VALORES PARA A FUNÇÃO QUE VAI MONTAR MEUS CIRCULOS
            } 
    }

    function randomNum(max) {
// GERO MEU NUMERO ALEATÓRIO
    return Math.floor(Math.random() * max);

    }

    function limpaTela() {
        pincel.clearRect(0, 0, 600, 400);
    }

    function time();
        ax = randomNum(600);
        ay = randomNum(400);
    limpaTela();
        circle(); \\ MONTO MEUS ALVOS 
    } 

     function alvo (raio,cor){
        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(ax, ay, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

    setInterval(time, 3000);

// NÃO TEM MUITA DIFERENÇA DO CODIGO DA AULA 

    function dispara(evento) {

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


    if((x > ax - raio)
    && (x < ax + raio)
    && (y > ay - raio)
    && (y < ay + raio)) {

        alert('Acertou!');

    }


}

tela.onclick = dispara;

</script>