Olá, depois de um tempinho consegui reproduzir as duas barras de forma satisfatória. Porém, ao verificar a resolução, vi que ela está um pouco diferente da forma como escrevi. Gostaria saber se o meu código ficou bom e se possuí algum erro que faça com que ele não seja funcional de alguma forma. Segue o código:
<canvas width="600" height ="400"></canvas>
<script>
//DADOS//
var serie2015 = [50,25,20,5];
var serie2016 = [65,20,13,2];
var cores = ["blue", "green", "yellow", "red"];
//FUNCOES//
var tela = document.querySelector ("canvas");
var pincel = tela.getContext ("2d");
function desenhaQuadrado (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){
pincel.font="15px Georgia";
pincel.fillStyle='black';
pincel.fillText(texto, x, y);
}
function desenhaBarra(x, y, serie, cores, texto) {
var altura = 50
desenhaTexto (x, y-10, texto)
for (var posicao = 0; posicao < serie.length; posicao++){
if (texto == "2015") {
desenhaQuadrado(x, altura, 50, serie2015[posicao], cores[posicao]);
altura = altura + serie2015 [posicao];
}
if (texto == "2016") {
desenhaQuadrado(x, altura, 50, serie2016[posicao], cores[posicao]);
altura = altura + serie2016 [posicao];
}
}
}
desenhaBarra(50,50,serie2015, cores, "2015");
desenhaBarra(150,50,serie2015, cores, "2016");
</script>