costo demasiado entender pero cuando lo entendi, le agregue un poco mas.

Soy nuevo en este mundo de la programación, me gustaría saber como lo puedo optimizar.

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

 <script>
     function dibujarBarra(x,y,base,serie,color) {

        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        pincel.fillStyle = color
        pincel.fillRect(x,y,base,serie);
        pincel.strokeStyle = "black";
        pincel.strokeRect(x,y,base,serie);
     }
      function escribirTexto(x , y, texto) {
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

        pincel.font="15px Arial";
        pincel.fillStyle="black";
        pincel.fillText(texto, x, y);    
    }  
     function pintarBarra(x,y,serie,color,texto) {
         var sumaAlturaNavegador = 120;
         for(var posicion = 0; posicion < nombreNavegador.length; posicion++) {
             escribirTexto(x, y+sumaAlturaNavegador, nombreNavegador[posicion] + ": " + serie[posicion] + " %");
            sumaAlturaNavegador = sumaAlturaNavegador+20;
         }
        escribirTexto(x+10,y-10,texto)
         var sumaAltura = 0;              
        for(var posicion = 0;posicion < serie.length;posicion++) {
            var altura = serie[posicion];
            var colorBarra = color[posicion];
            //var nombre = nombreNavegador[posicion];


            dibujarBarra(x,y+sumaAltura,50,altura,colorBarra);
            var sumaAltura = sumaAltura + altura;            

        }
    }    
        var serie2009 = [6, 47, 41, 3, 3];
        var serie2019 = [81,9,3,3,4];
         var barraColor = ["blue","green","yellow","red","lightgray"];
         var nombreNavegador = ["chrome","firefox","internet explorer","safari","otros"]; 
         pintarBarra(50, 50, serie2009, barraColor, "2009", nombreNavegador);
        pintarBarra(240, 50, serie2019, barraColor, "2019", nombreNavegador);


</script>