Fiz um código das barras que me pareceu mais prático de serem criadas

Fala galera,

Quando o professor lança a ideia eu já começo a fazer só com a chamada e só depois eu vou ler a aula e vejo a resolução para comparar.

Creio que da forma que criei ficou muito mais prático, menor e mais fácil de compreender o processo. Eu fiz comentários em quase todas as linhas de código para facilitar o entendimento de cada uma delas.

Espero ter ajudado. Sucesso na sua jornada!!

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

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");

    var largura = 50; // Comecei diferente do professor e já criei a variável largura que será a largura do X, pois nesse código ela determina a largura das barras e como serão todos da mesam largura, então deixei fixo.

    function desenharCaixa (x, y, altura, cor, texto) { // aqui eu criei a função e entre parênteses todos os dados que irei precisar para fazer: as caixas, as margens e desenhar o texto.

        // criar as caixas;

        pincel.fillStyle = cor; // puxa a cor que a função trouxer

        pincel.fillRect (x, y, largura, altura); // puxo o X, o Y e a altura da função, mas a largura eu pego da variável que declarei antes, pois é a largura que determina o tamanho das caixas e como todas são iguais eu deixei ela fixa


        // criar as margens de cada caixa

        pincel.fillStroke = "black";

        pincel.strokeRect (x, y, largura, altura); // puxa as informações que a função trouxer

        // desenho do texto

        pincel.font = "12px Georgia"; //deinição do tamanho e fonte 

        pincel.fillStyle = cor; // puxo a cor que a função trouxer

        pincel.fillText (texto, x + largura + 6, y + (altura/2) + 5); // puxa da função o texto, o x e o y. Eu automatizei a posição do texto em relação a posição do do X e do Y trazido pela função, para a posição que for dado o X, ele irá somar a Largura + 6, com isso ficará ao lado da caixa com distanciamento e para a posição Y ele pega a última posição do Y + a metade da altura trazida pela função + 5 para que o texto fique na direção da metade caixa 

    }

    function desenharBarra (x, y, percentAno) { // aqui eu faço a função para desenhar a barra de acordo com o ano que quero

        for ( var i = 0 ; i < percentAno.length ; i++){ // faço o loop para desenhar as caixas, as margens, e os textos

            desenharCaixa (x, y, percentAno[i], colors[i], navegadores[i]); //aqui eu busco os dados nas minhas listas e mando eles para a função desenharCaixa fazer as caixas, margens e o texto

            y = y + percentAno[i]; // Como a posição de X não muda, pois as caixas são feitas na mesma direção. Mas a posição Y muda a cada nova caixa criada, então eu adiciono ao Y a altura da último percentual.  
        }
    }

    serie2015 = [50, 25, 20, 5];
    serie2016 = [65, 20, 13, 2];

    navegadores = ["Chrome", "Firefox", "Safari", "Outros"];

    colors = ["blue", "red", "purple", "black"];


    desenharBarra(50, 50, serie2015);

    desenharBarra(200, 50, serie2016);

</script>