Fiz uma pequena "melhoria" no programa e agora a bolinha só começa a pulsar depois de um clique na tela. Funcionou! O interessante é que se clicarmos de novo na tela outra bolinha começa a pulsar sobreposta com a primeira. Queria fazer a bolinha parar de pulsar apertando alguma tecla ou o botão direito do mouse mas não consegui pois não sei como interromper o "setInterval que fica rodando sem parar. Existe alguma maneira de fazer isto?
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
function desenhaCirculo(x, y, raio) {
pincel.fillStyle = "red";
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
}
var raio = 19;
var sentido = 0
function atualizaTela() {
limpaTela();
if( raio > 30) {
sentido = -1;
} else if (raio < 20 ) {
sentido = 1;
}
raio = raio + sentido;
desenhaCirculo(50, 50, raio);
}
function comeca (){
setInterval(atualizaTela, 20);
}
tela.onclick = comeca;