Barras y pilares

Hola, tu código me ayudó a terminar de escribir el mío.

Tengo dos sugerencias:

1) Al traer la función escribirTexto(x,y,texto) te recomiendo descontarle unos pixeles y, para que no quede pegado al gráfico. A mi me quedó así: escribirTexto(x,y-20,texto); 2) Al usar el for tu código fue for (var posicion = 0 ; posicion < serie2009.length; posicion++) por lo que veo que calculaste el length pero especificando uno de los array, resultaría mejor si solo fuera "serie.length", pues en el caso de que el array serie2019 fuera mas grande dibujaría todos los rectángulos.

Espero te sirva. Saludos!

Te paso mi código completo.

<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-20,texto);

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

        }

    }


    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>

Agregué el código a la respuesta. Veo que modificaste la función de text para resolver el problema de que queda pegado a la barra, el problema es que si luego quieres usar esa función en otros trabajos resulta imprecisa porque te va a modificar los parámetros que quieras darle y tendrás que estar calculando que pasarle para que el texto aparezca donde quieres.

Hola, Cristian, gracias por haberte tomado el tiempo de analizar el código y darme feedback.

Con el punto 1. Es verdad, yo modifique la función escribirTexto, lo cual con hice poco genérica como nos recomienda el instructor. Luego de ver la solución propuesta, vi que es una mejor alternativa usar ** escribirTexto(x,y-20,texto)** . Dado que así, la solo se modifica el parámetro y no la función.

Con el punto 2, cierto. Se envía el array y no debería de usar el serie2009 dado que ya esta el parámetro serie.

Ya hice las mejoras al código y todo funciona.