Gráfico de Barras - Solução (alternativa ao gabarito)

Achei muito legal o desafio do gráfico de barras. Durante a construção após várias tentativas fracassadas resolvi copiar o gabarito e tentar entender o que a função fazia. Após analisar mais ou menos entendi. Não satisfeito resolvi fazer de uma maneira que eu entendesse de fato o que estava acontecendo. Eis o resultado

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

<script>
    /* fazTexto escreve 2015 ou 2016 quando solicitada*/
    function fazTexto(texto,x,y){
        var tela=document.querySelector('canvas');
        var pincel=tela.getContext('2d');
        pincel.font='15px Georgia';
        pincel.fillStyle='black';
        pincel.fillText(texto,x,y);
    }

    /*fazRetangulo desenha um retângulo recebendo o parametro "quadrado" o qual contém
    a cor, coordenada x, coordenada y e altura/tamanho do retangulo*/
    function fazRetangulo(quadrado){
        var tela=document.querySelector('canvas');
        var pincel=tela.getContext('2d');
        var cor=quadrado[0];
        pincel.fillStyle=cor
        pincel.fillRect(quadrado[1],quadrado[2],50,quadrado[3]);
        pincel.fillStroke='black'
        pincel.strokeRect(quadrado[1],quadrado[2],50,quadrado[3]);
    } 
    /*declaração das principais variaveis do exercício*/   
    var cores = ['blue','green','yellow', 'red'];
    var serie2015 = [50,25,20,5];
    var serie2016 = [65,20,13,2];
    var textos=['2015','2016'];

    /*fazBarra cria as duas barras e para tal e insirida no seu interior as variaveis declaras acima*/    
    function fazBarra(cores,serie2015,serie2016,textos){   

        fazTexto(textos[0],30,30);  /* escreve "2015" na tela nas coordenadas 30,30*/
        fazTexto(textos[1],150,30); /* escreve "2016" na tela nas coordenadas 150,30*/

        var coordx=[25,145]; /* coordenadas x das duas barras, estão com 5px de deslocamento à esquerda para que os anos fiquem 
        centralizados acimas das barras*/

        var coordy1=[50,50+serie2015[0],50+serie2015[0]+serie2015[1],50+serie2015[0]+serie2015[1]+serie2015[2]]; /*coordenadas y da primeira barra*/

        var coordy2=[50,50+serie2016[0],50+serie2016[0]+serie2016[1],50+serie2016[0]+serie2016[1]+serie2016[2]]; /*coordenadas y da segunda barra. A primeria coordenada é 50 e depois são somadas as anteriores para se obter a próxima*/
        /*as coordenadas x são apenas duas, uma para cada barra. As coordenadas y precisam ser separadas em duas variáveis*/

        for (i=0;i<2;i++){
            for (j=0;j<4;j++){
                if(i==0){
                    var quadrado = [cores[j], coordx[i], coordy1[j],serie2015[j]];
                    fazRetangulo(quadrado);
                } else {
                    var quadrado = [cores[j], coordx[i], coordy2[j],serie2016[j]];
                    fazRetangulo(quadrado);
                }
            }
        }
    }
    /*foi optado por dois loops for, o mais externo que usa a variavel "i" serve para estabelecer basicamente a corrdenada x dos retangulos enquanto o loop interno de variável "j" é o que de fato faz a construção do resultado*/


    /*finalmente chamada a função final*/
    fazBarra(cores,serie2015,serie2016,textos);

</script>