BORDAS

Oi, notei que a função que faz a limpeza da animação, também apagar as bordas que eu havia feito. É assim mesmo ou fiz algo errado? Obg!

(A minha intenção é que houvesse um quadro colorido, ou com bordas, para que a pessoa saiba que os alvos aparecerão ali dentro daquele espaço.)

<canvas id="tela" width="600" height="600"></canvas>
<meta charset=utf-8>

<script>
var raio = 10;
var alvoX;
var alvoY;
var c = tela.getContext("2d");

function moldura(x,y){
  var tela = document.getElementById("tela");

c.fillStyle = "white";
c.fillRect(x,y,600,600);
c.strokeStyle = "#33a6cc";
c.strokeRect(0,0,600,600);
c.lineWidth = 0.7;

};

moldura(0,0);

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

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

function limpa() {
    c.clearRect(0,0,600,600);
}

function sorteia(max) {
    return Math.floor(Math.random() * max);
}

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

setInterval(desenha, 930);

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("Isso!");
    }
}
</script>