dudas

Hola Jonathan! Como estas? Lo ideal sería poder ver todo el codigo pero paso a responder algunas cosas que creo, te noto algo mareado.

Vos tenes el siguiente código:

for (var i = 0; i< serie.length; i++) {
     var altura = serie[i]; 
     dibujarRectangulo(x, y+sumaAltura, 50, altura, colores[i]);

     sumaAltura=sumaAltura+altura;
}

Y preguntas esto: me confundo en realidad ya que hay dos arreglos var serie2009 = [6, 47, 41, 3, 3]; var serie2019 = [81, 9, 3, 3, 4]; si me dice i< serie.length cual de estos dos arreglos estaría recorriendo? o como hago para saber todo el proceso que realiza el código? como el paso a paso.

Primero te cuento que lo mejor que podes hacer es utilizar la consola, donde te van a salir los errores.

Dicho esto, en tu codigo no estas recorriendo NINGUNO de los dos arreglos, ya que un arreglo se llama serie2009 y el otro arreglo se llama serie2019.

Como podemos ver en tu codigo, vos estas usando el for de la siguiente manera:

for (var i = 0; i< SERIE.length; i++) {}

*Borre el interior del for ya que no es importante en lo que quiero transmitirte a continuación, lo que quiero que prestes atencion es al nombre del arreglo a recorrer que utilizaste: SERIE *

En tu codigo estas queriendo saber el tamaño de un arreglo que NO EXISTE dentro de tu código. Propiamente si quisieras recorrer el arreglo serie2009 asi tendrias que resolverlo:

for (var i = 0; i< serie2009.length; i++) {}

O si en cambio quisieras recorrer el arreglo serie2019 asi tendrias que resolverlo:

for (var i = 0; i< serie2019.length; i++) {}

Esto deberia solucionar algunos problemas, por el resto, no puedo seguirte correctamente porque no se cual es tu código! Si copias tu código te puedo ayudar mejor.. espero haberte aportado algo de claridad. Un abrazo!

Hola. Yo para poder entender mejor el While y el For miré este video (específicamente el minuto 2:23:28): https://www.youtube.com/watch?v=z95mZVUcJ-E&t=8608s&ab_channel=SoyDalto También abarca muchísimos temas más de JavaScript, es muy recomendable. Saludos.

Buenos días, este es el código canvas width="600" height="400">

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"];


function dibujarBarra(x,y,serie, colores, texto){

    escribirTexto(x,y-10, texto);

    var sumaAltura=0
    for (var i = 0; i< serie.length; i++) {

        var altura = serie[i]; 
        dibujarRectangulo(x, y+sumaAltura, 50, altura, colores[i]);

        sumaAltura=sumaAltura+altura;
    }


}

dibujarBarra(50, 50, serie2009, colores, "2009");
dibujarBarra(150, 50, serie2019, colores, "2019");