Por que a bolinha vermelha não está se movendo, e a azul parece estar travando ao pulsar?
<canvas width='600' height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'white';
pincel.fillRect(0,0,600,400);
function desenhaCirculo(x,y,raio,cor) {
pincel.fillStyle = cor
pincel.beginPath();
pincel.arc(x,y,raio,0,2*Math.PI)
pincel.fill();
}
function limpaTela () {
pincel.clearRect(0,0,600,400);
}
var x = 20
var sentido = 1
var raio = 20
function movimento () {
limpaTela();
if(raio>30) {
sentido = -1
}else if(raio<20) {
sentido = 1
}
desenhaCirculo(300,200,raio,'blue');
raio = raio+sentido;
}
function anda () {
limpaTela();
if(x>600) {
sentido = -1
}else if(x<0) {
sentido = 1
}
desenhaCirculo(x,20,10,'red');
x = x+sentido;
}
function apareca () {
setInterval(movimento,5);
setInterval(anda,5);
}
tela.onclick = apareca;
</script>