AYUDA, no se porque en la primera serie me sale esa franja blanca

Hola Alegría, Debajo te dejo tu código con las correcciones

<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);    
    }
    var serie2009 = [6,47, 41, 3, 3];
    var serie2019 = [81, 9, 3, 3, 4];
    var colores = ["blue","green","yellow", "red","gray"];

function llamar_barra(x,y,serie,color,texto){

    escribirTexto(x,y-5,texto);

    //var altura=0
    var sumaAltura = 0

    for (var posicion_y = 0; posicion_y < serie.length; posicion_y++){
        //altura=altura+serie[posicion_y];
        var altura = serie[posicion_y];
        //document.write(colores[posicion_y])
        dibujarRectangulo(x, y + sumaAltura, 50, altura, colores[posicion_y]);
        sumaAltura = sumaAltura + altura;
        // document.write("y="+altura);
    }

}

llamar_barra(50,50,serie2009,colores,"2009");
llamar_barra(120,50,serie2019,colores,"2019");   


</script>

gracias, ya se que esta pasando

Aqui esta:

<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);    
    }
    var serie2009 = [6,47, 41, 3, 3];
    var serie2019 = [81, 9, 3, 3, 4];
    var colores = ["blue","green","yellow", "red","gray"];

function llamar_barra(x,y,serie,color,texto){

    escribirTexto(x,y-5,texto);

    //var altura=0
    var sumaAltura = 0

    for (var posicion_y = 0; posicion_y < serie.length; posicion_y++){
        //altura=altura+serie[posicion_y];
        var altura = serie[posicion_y];
        //document.write(colores[posicion_y])
        dibujarRectangulo(x, y + sumaAltura, 50, altura, colores[posicion_y]);
        sumaAltura = sumaAltura + altura;
        // document.write("y="+altura);
    }

}

llamar_barra(50,50,serie2009,colores,"2009");
llamar_barra(120,50,serie2019,colores,"2019");   


</script>

no es necesario que declares variables si el valor que necesitas es de modificación única dentro de tu función, te dejo una alternativa de lo que te digo

function dibujarBarra(x, y, serie, colors, texto){
        escribirTexto(x, y, texto);
        for(var i = 0; i < serie.length; i++){
            dibujarCuadrilatero(x, y, 50, serie[i], colors[i]);
            y = y + serie[i];
        }
    }

nada mas aclaro que la función "dibujarCuadrilatero" yo la deje lo mas genérica que pude y el valor que recibe antes del de "serie[i]" es el ancho de la barra