Hice mi esfuerzo por hacerlo por cuenta propia y me funcionó de la siguiente manera, estoy atento a recibir explicación por que de seguro que se puede optimizar y agradecería la explicación para entenderlo bien.
<canvas width="600" height="400"></canvas>
<script>
function dibujarRectangulo(x, y, base, altura, color) {
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle=color;
pincel.fillRect(x,y, base, altura);
pincel.strokeStyle="black";
pincel.strokeRect(x,y, base, altura);
}
function escribirTexto(x , y, texto) {
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.font="15px Georgia";
pincel.fillStyle="black";
pincel.fillText(texto, x, y);
}
var serie2009 = [6, 47, 41, 3, 3];
var serie2019 = [81, 9, 3, 3, 4];
var colores = ["blue","green","yellow", "red","gray"];
dibujarBarra2009(50, 50, serie2009, colores, "2009");
dibujarBarra2019(150, 50, serie2019, colores, "2019");
function dibujarBarra2009(x, y, serie, colores, texto) {
dibujarRectangulo(50,50,50,serie2009[0],colores[0],escribirTexto(50,40,"2009"));
dibujarRectangulo(50,(50+serie2009[0]),50,serie2009[1],colores[1],texto);
dibujarRectangulo(50,(50+serie2009[0]+serie2009[1]),50,serie2009[1],colores[2],texto);
dibujarRectangulo(50,(50+serie2009[0]+serie2009[1]+serie2009[2]),50,serie2009[3],colores[3],texto);
dibujarRectangulo(50,(50+serie2009[0]+serie2009[1]+serie2009[2]+serie2009[3]),50,serie2009[4],colores[4],texto);
}
function dibujarBarra2019(x, y, serie, colores, texto) {
dibujarRectangulo(150,50,50,serie2019[0],colores[0],escribirTexto(150,40,"2019"));
dibujarRectangulo(150,(50+serie2019[0]),50,serie2019[1],colores[1],texto);
dibujarRectangulo(150,(50+serie2019[0]+serie2019[1]),50,serie2019[2],colores[2],texto);
dibujarRectangulo(150,(50+serie2019[0]+serie2019[1]+serie2019[2]),50,serie2019[3],colores[3],texto);
dibujarRectangulo(150,(50+serie2019[0]+serie2019[1]+serie2019[2]+serie2019[3]),50,serie2019[4],colores[4],texto);
}
</script>
Gracias!!