Muestro los porcentajes y los nombres de los navegadores preferidos por los usuarios, pero no los gráficos correspondientes

En los comentarios te puse los errores que encontre. Ya funciona.

<canvas width="600" height="400"></canvas>

<script>

    function dibujarRectangulo(x, y, base, altura, color) {// preferencia <> altura

        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);
        console.log(x,y,base,altura,color);// para saber si se ejecuta
    }

    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 colorearRectangulo(x,y,serie,color,texto) {
        var sumaPreferenciaNavegador = 120;
        var preferencia = serie[posicion];
        for(var posicion = 0; posicion < nombreNavegadorPreferido.length; posicion++){
            escribirTexto(x, y + sumaPreferenciaNavegador, nombreNavegadorPreferido[posicion] + " : " + serie[posicion] + " % ");
            sumaPreferenciaNavegador = sumaPreferenciaNavegador + 20;
        }
        escribirTexto(x+10, y-10, texto);
        var sumaPreferencia = 0;
        for(var posicion = 0; posicion < serie.length; posicion++){// sobraba [posicion] en serie.length
            var preferencia = serie[posicion];
            var colorBarra = color[posicion];

            dibujarRectangulo(x, y + sumaPreferencia, 50, preferencia, colorBarra)
            var sumaPreferencia = sumaPreferencia + preferencia;
        }
    }
    var serie2009 = [6, 47, 41, 3, 3];
    var serie2019 = [81,9,3,3,4];
    var barraColor = ["blue","green","yellow","red","lightgray"];
    var nombreNavegadorPreferido = ["Chrome","Firefox","Internet Explorer/Edge","Safari","Otros"]; 
    colorearRectangulo(50, 50, serie2009, barraColor, "2009", nombreNavegadorPreferido);
    colorearRectangulo(270, 50, serie2019, barraColor, "2019", nombreNavegadorPreferido);



</script>

Claro, ahora comprendo. Básicamente lo que dices es que el código en líneas generales estaba bastante bien, pero ese "[posicion]" en la serie,lengh evitaba que funcionara. GRACIAS, SEBASTIAN IGNACIO SUAREZ ROMERO

Si, totalmente. Solo tenia esos dos errores. Estaba dificil igual porque no reportaba nada. Acabo de ver que al verificar 0<serie.length[0] que seria lo que tu for hacia da false. O sea serie.length[0] es undefined y con cualquier valor que lo compares da false. Asi que ununca se ejecutaba el for

Lo interesante es que en la HERRAMIENTA DE DESARROLLADOR no me daba error, solamente no mostraba los gráficos, y eso me tenía sumamente intrigado

Claro. No habia error porque nunca se ejecutaba. En esos casos es cuando empezas a poner console.log por todos lados jajaj

"empezas a poner console.log por todos lados jaja"

Ahora que veo lo que decís descubro mi otro error, que fue el de no incluír la directiva console.log

Sebastian Ignacio Suarez Romero si incluyo el comando console.log, en herramientas de desarrollo no me brinda la información: es como si ignorara por completo la orden

Muy buen proyecto, saludos...!!!