Mais de uma bola com velocidades diferentes

Olá!

Eu tentei testar a possibilide de colocar 3 bolas em eixos y diferentes e com velocidades diferentes, se eu conseguisse fazer isso, depois tentaria fazer os milissegundos serem um número aleatório, mas não consegui nem a primeira parte. Eu fiz a função só com a bola azul e funciona. A partir do momento que coloco os 3 "setInterval" no fim, chamando cada função das bolas, parece que os intervalos se misturam e não sai nada como cada função declara. Como posso corrigir isso? Como fazer pra cada bola ter seu intervalo sem interferir o intervalo da outra?

Segue código:

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

<script>

var tela = document.getElementById("tela");
var c = tela.getContext("2d");

//bola azul
function circulo(x,y,raio) {
    c.fillStyle = "blue";
    c.beginPath();
    c.arc(x,y,raio, 0, 2*Math.PI);
    c.fill();
}
function limpaTela() {
    c.clearRect(0,0,600,400);
}
var x = 1
function desenha() {
    limpaTela();
    circulo(x,100,10);
    x = x + 1
}

//bola verde
function circulo2(x,y,raio) {
    c.fillStyle = "green";
    c.beginPath();
    c.arc(x,y,raio, 0, 2*Math.PI);
    c.fill();
}
function limpaTela() {
    c.clearRect(0,0,600,400);
}
var x = 1
function desenha2() {
    limpaTela();
    circulo2(x,200,10);
    x = x + 1
}

//bola vermelha
function circulo3(x,y,raio) {
    c.fillStyle = "red";
    c.beginPath();
    c.arc(x,y,raio, 0, 2*Math.PI);
    c.fill();
}
function limpaTela() {
    c.clearRect(0,0,600,400);
}
var x = 1
function desenha3() {
    limpaTela();
    circulo3(x,300,10);
    x = x + 1
}    

setInterval(desenha, 30);
setInterval(desenha2, 20);
setInterval(desenha3, 10);

</script>

Obrigado!