Este es el 1er ejercicio al que le vengo dando vueltas y no lo termino de entender. En particular, no sé qué hice mal en el código, solo se imprime el texto pero no se dibuja ninguna parte de la barra. Podrian orientarme en qué estoy haciendo mal?
<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);
var sumaAltura = 0;
for (var i = 0; i < serie.legth ; i++) {
var altura = serie [i]
dibujarRectangulo(x,y+sumaAltura, 50,altura,colores[i])
sumaAltura = sumaAltura + altura}
}
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");
</script>