Meu código para o gráfico de barras.

Olá, pessoal!

Tudo bem? De acordo com o que aprendi até agora criei meu código para o exercício gráfico de barras, implementei conteúdos do módulo passado e também desse módulo.

Por gentileza, realizem críticas é muito importante para que eu possa melhorar.

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



<script>

function anoTexto(){
    //Estrutura para descrição do ano do gráfico
    pincel.font = "12px Georgia";
    pincel.fillStyle = 'black';

    pincel.fillText("Ano 2015",250,325);
    pincel.fillText("Ano 2016",450,325);

}

//Função da legenda com parâmetros xBegin para determinar ao chamar a função qual a posição X inicial dos quadrados. O parâmetro serie é para chamar a variável correta entre serie2015 ou serie2016 para obter as porcentagens para a legenda e concatenar na função fill.Text.
function legenda(xBegin,serie){
    //Variável que determina a posição inicial y de cada desenho de quadrados para legenda.
    let y = 400;

    //Estrutura de repetição para desenhar a legenda.
    for(let x = 0; x < cores.length;x++){

        //Estrutura que determina a criação dos quadrados para legenda.
        pincel.fillStyle = cores[x];
        pincel.fillRect(xBegin,yLegenda[x],25,25);
        pincel.strokeStyle = 'black';
        pincel.strokeRect(xBegin,yLegenda[x],25,25)

        //Estrutura para desenhar o texto e posicionar ao lado e centralizado de seu devido rect. Função fill.Text buscando título dos navegadores por ordem da Array e concatenando com a Array do seu respectivo ano série para após isso concatenar com % exibir para o usuário.
        pincel.font = '10px Georgia';
        pincel.fillStyle = 'black';
        pincel.fillText(navegadores[x]+" - "+serie[x]+"%", xBegin+35,(yLegenda[x]+(25/2)));
    }
}

//Função que desenha o gráfico parâmetros xBegin para determinar ao chamar a função qual a posição X inicial dos quadrados. O parâmetro serie é para chamar a variável correta entre serie2015 ou serie2016.
function desenhaBarras(xBegin,serie){
    //Variável que determina em que posição y o próximo desenho de retângulo referente a porcentagem começará.(feito para que um retângulo não sobreponha o outro).
    let y = 300;

    //Estrutura de repetição para desenhar um retangulo após o término do outro.
    for(let x = 0; x < serie.length; x++){

    pincel.fillStyle = cores[x];
    pincel.fillRect(xBegin,y,50,-serie[x]);
    pincel.strokeStyle = 'black';
    pincel.strokeRect(xBegin,y,50,-serie[x])

    //Atribuição do valor na variável Y para determinar aonde começar o desenho da próxima repetição.
    y = y-serie[x];
    }



}

//Variáveis canvas.
var myCanvas =  document.querySelector('canvas');
var pincel = myCanvas.getContext('2d');

//Variáveis gráfico.
var serie2015 = [5,20,25,50];
var serie2016 = [2,13,20,65];
var cores = ['red','yellow','green','blue'];
var navegadores = ["Outros","Safari","Firefox","Chrome"];

//Variáveis da legenda.
var yLegenda = [400,450,500,550];

//Cor do canvas.
pincel.fillStyle = 'lightgray';
pincel.fillRect(0,0,800,600);

//Chamando as funções
desenhaBarras(250,serie2015);
desenhaBarras(450,serie2016);
legenda(250,serie2015);
legenda(450,serie2016);
anoTexto();

</script>