Olá,

Estava fazendo uns testes e percebi que quanto mais eu ativar a mesma função setInterval, mais a velocidade aumenta. segue o código que estava testando:

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

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgrey';
    pincel.fillRect(0, 0, 600, 400);

    function desenhaCirculo(x, y, raio) {

        pincel.fillStyle = cores2;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

    var cores = ['blue', 'red', 'green', 'yellow', 'lime', 'black'];
    var cores2 = cores[0]
    var contador = 1


    function mudaCor() {

        while(contador < cores.length){

            cores2 = cores[contador]

            if(contador == cores.length - 1){
                contador = contador  - cores.length
            }
            contador ++;
            break;
        }

        return false;
    }

    function limpaTela(){

        pincel.clearRect(0, 0, 600, 400);

    }

    var x = 20
    var y = 20
    var sentido = 1
    var sentido2 = 1
    function atualizaTela(){

        limpaTela();

        if(x == 580){
            sentido = -1
            sentido2 = -1
            mudaCor()
        }else if(x < 20){
            sentido = 1
            sentido2 = 1
            mudaCor()
        }

        desenhaCirculo(x, y, 10);
        desenhaCirculo(x, 20, 10);
        desenhaCirculo(20, y, 10);
        x = x + sentido;
        y = y + sentido2;
    }

    function chaveTotal (){

        setInterval(atualizaTela, 10);

    }

    tela.onclick = chaveTotal;
    tela.oncontextmenu = mudaCor;

</script>

Quanto mais clicar na tela, ativando setInterval(atualizaTela, 10); , mais a velocidade aumenta.

Alguem poderia me explicar por que isso acontece?