Lo que hicimos en el aula

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

<script>
    var x=0;
    var direccion =1;
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    var radio = 10;
    var xAleatorio;
    var yAleatorio;



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

    function diseniarCircunferencia(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);
    }

    function sortearPosicion (maximo) {

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

    function actualizarPantalla() {
        limpiarPantalla();
        pincel.fillStyle ="lightgrey";
        pincel.fillRect (0,0,600,400);
        xAleatorio=sortearPosicion(600);
        yAleatorio=sortearPosicion(400);
        diseniarObjetivo(xAleatorio,yAleatorio);    
        x++;
    }

        setInterval(actualizarPantalla,1000)


    function diseniarObjetivo (x,y){
        diseniarCircunferencia(x,y,radio+20,"red");
        diseniarCircunferencia(x,y,radio+10,"white");
        diseniarCircunferencia(x,y,radio,"red");
    }



    function disparar(evento) {
        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)){
        alert("Acerto");
        }

    }


    pantalla.onclick=disparar;

</script>