Resolvi abrir mão da estrutura de repetição para desenhar de maneira mais simples e, caso queira mudar, é somente modificar os valores das Arrays 2015, 2016 e cores. Ainda apliquei uma legenda com a porcentagem de cada navegador. Uma dúvida é: Daria pra concatenar, o texto da função "desenhatexto" com uma das posições das Arrays?
<canvas width = "600" height = "400"></canvas>
<script>
//função para desenhar as barras
function desenharetangulo (x, y, largura, altura, 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);
}
//função para desenhar os textos
function desenhatexto (texto, x, y, cor){
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.font = '15px Georgia';
pincel.fillStyle = cor;
pincel.fillText (texto, x, y);
}
//Arrays com as series de 2015 e 2016 e as cores
var serie2015 = [50, 25, 20, 5];
var serie2016 = [65, 20, 13, 2];
var cores = ['blue', 'green', 'orange', 'red'];
//primeira barra
desenharetangulo (0, 0, 50, serie2015[0], cores[0]);
desenharetangulo (0,50, 50, serie2015[1], cores[1]);
desenharetangulo (0,75, 50, serie2015[2], cores[2]);
desenharetangulo (0,95, 50, serie2015[3], cores[3]);
//segunda barra
desenharetangulo (100, 0, 50, serie2016[0], cores[0]);
desenharetangulo (100,65, 50, serie2016[1], cores[1]);
desenharetangulo (100,85, 50, serie2016[2], cores[2]);
desenharetangulo (100,98, 50, serie2016[3], cores[3]);
//Textos anos
desenhatexto ('2015', 10, 120, 'black');
desenhatexto ('2016', 110, 120, 'black');
//Texto e legendas
desenhatexto ('Gráfico de uso de Navegadores nos anos de 2015 e 2016.', 0, 150, 'black');
desenhatexto ('Legenda:', 0, 170, 'black');
desenhatexto ('Google Chrome', 0, 190, cores[0]);
desenhatexto ('2015: 50% / 2016: 65%', 120, 190, cores[0]);
desenhatexto('Firefox', 0, 210, cores[1]);
desenhatexto ('2015: 25% / 2016: 20%', 120, 210, cores[1]);
desenhatexto ('Safari', 0, 230, cores[2]);
desenhatexto ('2015: 20% / 2016: 13%', 120, 230, cores[2]);
desenhatexto ('Outros', 0, 250, cores[3]);
desenhatexto ('2015: 5% / 2016: 2%', 120, 250, cores[3]);
</script>