Aula 2 - Atividade 7 - Solução com legendas

Eae pessoal!

Resolvi tentar fazer uma solução que tivesse as legendas geradas junto com as barras, e deu certo. Então passei pra deixar a solução aqui pra galera.

Eu fiz mais 3 variáveis e mais 2 incrementos na função desenhaBarra. E o título com a função desenhaTexto.

<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 desenhaTexto(x, y, texto) {

        pincel.font = "20px Georgia";
        pincel.fillStyle = "black";
        pincel.fillText(texto, x, y - 5);
    }

    function desenhaRetangulo(x, y,largura, altura, cor) {

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, largura, altura);
        pincel.strokeStyle = "black";
        pincel.strokeRect(x, y, largura, altura);
    }

    function desenhaBarra(x, y, serie, ano) {

        desenhaTexto(x, y, ano);

        var posicao = 0;

        var textoLegenda = 30
        var corLegenda = 10
        /*os incrementos são os mesmos, mas prescisei fazer 2 variáveis
        para que o texto e o quadradinho não fiquem sobrepostos*/

        while(posicao < serie.length){

            desenhaRetangulo(x, y, 40, serie[posicao], cores[posicao]);
            desenhaTexto(textoLegenda, 230, navegador[posicao]);
            desenhaRetangulo(corLegenda, 213, 10, 10, cores[posicao]);

            textoLegenda = textoLegenda + 140; //espaçamento entre os textos da legenda
            corLegenda = corLegenda + 140; //espaçamento entre os quadradinhos da legenda
            y = y + serie[posicao]; //soma y (posição atual) ao tamanho do retângulo desenhado
            posicao++;
        }
    }

    var navegador = ["Chrome", "Firefox", "Safari", "Outros "]; 
    var cores = ["blue", "green", "yellow", "red"];
    var serie2015 = [50, 25, 20, 5];
    var serie2016 = [65, 20, 13, 2];

    desenhaTexto(40, 30, "Navegadores mais utilizados pelos alunos da Alura");

    desenhaBarra(200, 70, serie2015, "2015");
    desenhaBarra(285, 70, serie2016, "2016");

</script>

Se não der pra entender alguma coisa do código pergunta aí que eu tento responder. E sugestões serão muito bem-vindas.

Até mais!