<meta charset="UTF-8">
<body>
    <canvas width="600" height="400"></canvas>
    <script>
    /* ============================ FUNÇÕES ============================ */         
        function criarVetor(porcentagem, cor, ano){            
               if (ano == 2015){
                armazena2015.push(porcentagem,cor);                
               } else {
                armazena2016.push(porcentagem,cor);                
               }            
        }
        function calculaAltura(armazena, ano){
                if (ano == 2015){
                    for(let i=0; i<armazena.length; i++){              
                        let calcAlturaNav = (altTotalGrafA * armazena[i])/100;
                        armazena[i] = calcAlturaNav;                            
                        i++;
                    }                          
                } else {
                    for(let i=0; i<armazena.length; i++){              
                        let calcAlturaNav = (altTotalGrafB * armazena[i])/100;
                        armazena[i] = calcAlturaNav;                            
                        i++; 
                    }       
                }         
            return armazena;
        }          
        function gerarGrafico(armazena, ano){            
            if (ano == 2015){
                calculaAltura(armazena, ano);
                let posYgrafA 
                for (let j=0; j<armazena.length; j++){
                    posYgrafA = alturaTela - armazenaValores - armazena[j];
                    armazenaValores = armazenaValores+armazena[j];                
                    pincel.fillStyle = armazena[j+1];
                    pincel.fillRect(posXgrafA, posYgrafA, largGrafA, armazena[j]);
                    pincel.strokeStyle="black";
                    pincel.strokeRect(posXgrafA, posYgrafA, largGrafA, armazena[j])
                    j++;
                }
                desenhaTexto("2015",posXgrafA,posYgrafA-20,ano )
            } 
            if (ano == 2016){
                calculaAltura(armazena, ano); 
                armazenaValores = 0;
                let posYgrafB
                for (let k=0; k<armazena.length; k++){
                    posYgrafB = alturaTela - armazenaValores - armazena[k];
                    armazenaValores = armazenaValores+armazena[k];                
                    pincel.fillStyle = armazena[k+1];
                    pincel.fillRect(posXgrafB, posYgrafB, largGrafB, armazena[k]);
                    pincel.strokeStyle="black";
                    pincel.strokeRect(posXgrafB, posYgrafB, largGrafB, armazena[k])
                    k++;
                }
                desenhaTexto("2016",posXgrafB,posYgrafB-20,ano )
            }            
        }
        function desenhaTexto(texto, x , y, ano) {
            pincel.font='20px Georgia';
            pincel.fillStyle='white';
            pincel.fillText(texto, x, y);    
        }
        /* == VARIÁVEIS === */
        let armazena2015 = [];
        let armazena2016 = [];
        let alturaTela = 400;
        let armazenaValores = 0;
        let ano;
        // Gráfico A
        const posXgrafA = 150;
        const largGrafA = 100;
        let altTotalGrafA = 300;
        // Gráfico B
        const posXgrafB = 350;
        const largGrafB = 100;
        let altTotalGrafB = 300;
        var tela = document.querySelector("canvas");
        var pincel = tela.getContext("2d");
        /* ============================ PARÂMETROS DOS GRÁFICOS ============================ */
        //gráfico 2015 -Apenas para tirar parâmetros
        // pincel.fillStyle="white";
        // pincel.fillRect(150,100,100,300);
        // pincel.fill();
        //gráfico 2016 - Apenas para tirar parâmetros
        //  pincel.fillStyle="white";
        //  pincel.fillRect(350,100,100,300);
        //  pincel.fill();
        /* == INICIANDO AS CONFIGURAÇÕES DE TELA E PASSANDO PARÂMETROS AS FUNÇÕES == */
        // Deixando a tela da cor preta
        pincel.fillStyle="black";
        pincel.fillRect(0,0,600,400);
        pincel.fill();
        // ============== ANO 2015 ==============   
        //Outros - vermelho
        criarVetor(5, "red", 2015);
        //safari - amarelo
        criarVetor(20, "yellow", 2015);
        //Firefox - azul
        criarVetor(25, "blue", 2015);
        //chrome - verde
        criarVetor(50, "green", 2015);
        gerarGrafico(armazena2015, 2015);
        // ============== ANO 2016 ==============
        //Outros - vermelho
        criarVetor(2, "red", 2016);
        //safari - amarelo
        criarVetor(13, "yellow");
        //Firefox - azul
        criarVetor(20, "blue");
        //chrome - verde
        criarVetor(65, "green");
        gerarGrafico(armazena2016, 2016);
    </script>