Gráfico de barras | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Eu demorei um pouco pra chegar nessa conclusão, mas quando entendi achei legal criar mais uma função para incluir as legendas.

Mina solução ficou diferente da do instrutor, mas funcional igual.

Gostaria de dicas de melhoria!

<meta charset="utf-8">
<canvas width="600" height="400"></canvas>

<script type="text/javascript">
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");

    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0, 0, 300,400);

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

    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 desenhaTexto (x, y, texto)
    {
        var tela = document.querySelector("canvas");
        var pincel = tela.getContext("2d");

        pincel.font = "15px Georgia";
        pincel.fillStyle = "black";
        pincel.fillText(texto, x, y);

    }

    function desenhaBarra(x, y, serie, cor, texto)
    {
        desenhaTexto(x,y-5,texto);
        for (var posicao = 0; posicao <= 3; posicao++)
        {
            desenhaRetangulo(x,y,50, serie[posicao],cor[posicao]);
            y = y + serie[posicao];
        }

    }

    function desenhaLegenda(x,y,listaCor,legenda)
    {

        for (var posicao = 0; posicao <= 3; posicao++) 
        {
            desenhaRetangulo(x, y,20, 20, listaCor[posicao]);
            desenhaTexto(x+30, y+15, legenda[posicao]);
            y = y + 30;

        }
    }    

    desenhaTexto(50,20,"Gráfico de barras");
    desenhaBarra(50, 50, serie2015, cores, "2015");
    desenhaBarra(150, 50, serie2016, cores, "2016");
    desenhaTexto(50, 185,"Legenda:");
    desenhaLegenda(50, 200, cores, navegadores);

</script>

Olá, Kássia! Tudo bem contigo?

Desculpe a demora em dar um retorno!

Parabéns pela lógica! Ficou muito bacana mesmo!

Dê uma olhada nessa outra estrutura que pode te dar uma outra ideia

<meta charset="utf-8">

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

<script>
    //Representa os percentuais de cada ano.
    var serie2015 = [50, 25, 20, 5];
    var serie2016 = [65, 20, 13, 2];
    var navegador = ['Chrome', 'Firefox', 'Safari', 'outros'];
    var cores = ['blue', 'green', 'yellow', 'red'];

    var py = 0;
    var largura = 0;
    var altura = 50;
    var cor = '';
    desenhaTexto(0, 20, 'Procuramos em alguns relatórios da Alura quais navegadores os nossos alunos utilizavam em 2015 e 2016. Separamos os dados:');

    function desenhaRetangulo(x, y, altura, largura, cor) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

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

    function desenhaTexto(x, y, texto) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.font = '15px Georgia';
        pincel.fillStyle = 'black';
        pincel.fillText(texto, x, y);
    }

    function desenhaBarra(x, y, serie, cores, texto, porcentagem) {

        for (var i = 0; i < serie.length; i++) {
            altura = serie[i];
            cor = cores[i];
            desenhaRetangulo(x, y + py, altura, 50, cor);
            py += altura
        }
        desenhaTexto(x + 5, y - 5, texto);
        py = 0;
    }

    function desenhaLegenda(x, y, navegador, cores, serie, texto) {
        for (var i = 0; i < serie.length; i++) {
            var n = navegador[i];
            cor = cores[i];
            desenhaRetangulo(x, y, 20, 20, cor);
            desenhaTexto(x - 15, y + 35, n);
            x += 85;
        }
        if (serie == serie2015) {
            for (var i = 0; i < serie.length; i++) {
                altura = serie[i];
                if (i >= 2) {
                    desenhaTexto(x - 240, y - altura - 30, altura + '%');
                } else {
                    desenhaTexto(x - 240, y - altura - 52, altura + '%');
                }
            }
        } else {
            for (var i = 0; i < serie.length; i++) {
                altura = serie[i];
                if (i == 0) {
                    desenhaTexto(x - 90, y - altura - 45, altura + '%');
                }
                if (i == 1) {
                    desenhaTexto(x - 90, y - altura - 41, altura + '%');
                }
                if (i == 2) {
                    desenhaTexto(x - 90, y - altura - 32, altura + '%');
                } if (i == 3) {
                    desenhaTexto(x - 90, y - altura - 24, altura + '%');
                }
                //desenhaTexto(x-100, y-altura-28 , altura +'%');     
            }
        }
    }

    desenhaBarra(100, 50, serie2015, cores, '2015');
    desenhaBarra(250, 50, serie2016, cores, '2016');
    desenhaLegenda(60, 190, navegador, cores, serie2015);
    desenhaLegenda(60, 190, navegador, cores, serie2016);

</script>

Um abraço e bons estudos

Mergulhe em programação