Eu tambem fiz de forma diferente, no resultado do monitor, ele sua diversas funções, mas eu acabei usando somente uma, acho mas facil o entendimento, com muitas funções eu acabo me perdendo:
<canvas height="600" width="600"></canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
pincel.fillStyle = "gray";
pincel.fillRect(0,0,600,600);
function desenhaBarra(x, y, serie, cores, texto) {
// aqui precisamos usar fillRect, strokeRect, etc
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
var total = 0
for(var i = 0; i <= serie.length; i++) {
pincel.fillStyle = "black"
pincel.font='20px Georgia';
pincel.fillText( texto, x, y-20);
if (i == 0 ) {
pincel.fillStyle = cores[i]
pincel.fillRect(x, y, 50, serie[i]);
pincel.fillStyle = "black"
pincel.strokeRect(x, y, 50, serie[i])
} else {
pincel.fillStyle = cores[i]
pincel.fillRect(x, y + total, 50, serie[i]);
pincel.fillStyle = "black"
pincel.strokeRect(x, y + total, 50, serie[i])
}
total = total + serie[i];
}
}
var serie2015 = [50, 25, 20, 5];
var serie2016 = [65, 20, 13, 2];
var cores = ['blue', 'green', 'yellow', 'red'];
desenhaBarra(50, 50, serie2015, cores, '2015');
desenhaBarra(150, 50, serie2016, cores, '2016');
</script>