La manera en que cree este codigo fue un poco mas elaborada porque creia que tambien se ocupaba lso numeros al lado derecho de la barra Además utilice una suma para rapida para que y incrementara de acuerdo a el numero que se ingrese en la serie Por ultimo este valor se multiplico por 3 para que se viera un poco mejor los numeros
<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);
}
function dibujarBarra(x, y, serie, colores, texto) {
escribirTexto(x, y - 10, texto); //se coloco a la variable y una resta de 10 para que el texto se colocara arriba de la barra
for (var i = 0; i < serie.length; i++) {
dibujarRectangulo(x, y, 50, serie[i]*3, colores[i]); //se le coloco un *3 porque se encesitaba que la tabla fuera mas grande a como se pedia en el ejercicio
escribirTexto(x+55, y+(serie[i]*2), serie[i]); //se coloco a la variable y una suma de la variable serie[i] *2 para que el texto se colocara en el centro de la barra
y += serie[i]*3; //se coloco a la variable y una suma de la variable serie[i] *3 para que la barra siguiera creciendo
}
}
var serie2009 = [6, 47, 41, 3, 3];
var serie2019 = [81, 9, 3, 3, 4];
var colores = ["blue","green","yellow", "red","gray"];
dibujarBarra(50, 50, serie2009, colores, "2009");
dibujarBarra(150, 50, serie2019, colores, "2019");
//Aquí viene el texto faltante
</script>