Dúvida no Ex. 1 da Aula 5 - Desafio Final

Pessoal, não é bem uma dúvida no Exercício é só uma complementação, eu queria que a tela ficasse marcada com uma caixa preta, eu adicionando o código

c.strokeStyle="black"; c.strokeRect(0,0,600,400); embaixo da var c = tela.getContext("2d");

funciona no começo porém depois que o alvo começa a aparecer a caixa preta some, poderiam me essa força? o meu código completo é esse embaixo,

<h1>Acerte o ALVO</h1>

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

<script>

    var tela=document.getElementById("tela");
    var c = tela.getContext("2d");
    c.strokeStyle="black";
    c.strokeRect(0,0,600,400);

var raio = 10
var alvoX;
var alvoY;

var desenhaAlvo = function(x, y) {
    circulo(x,y, raio +30, "white");
    circulo(x,y, raio +20, "red"); 
    circulo(x,y, raio +10, "white");
    circulo(x,y, raio, "red");   

};

var circulo = function (x,y,raio,cor){
    c.fillStyle = cor;
    c.beginPath();
    c.arc(x,y,raio,0,2*Math.PI);
    c.fill();
};

var limpa = function() {
    c.clearRect(0,0,600,400);
}
var sorteia = function(max){
    return Math.floor(Math.random()*max);
}


var desenha = function() {
  limpa();
  alvoX = sorteia(600);
  alvoY = sorteia(400);
  desenhaAlvo(alvoX, alvoY);
};



setInterval(desenha, 1000);

tela.onclick = function(evento){
    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;
    if((x > alvoX - raio) && (x < alvoX + raio) && 
        (y > alvoY - raio) && (y < alvoY + raio)) {
            alert("Boa! bem no alvo!");
    }
else{
alert("você errou, tente de novo! ")
}
}
</script>