Mi codigo

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

<script>
    document.write("<h1>Evolucion navegadores 2009-2019</h1>");
    let pantalla = document.querySelector("canvas");
    let pincel = pantalla.getContext("2d");
    let serie2009 =[6, 47, 41, 3, 3];
    let serie2019 =[81, 9, 3, 3, 4];
    let colores =["blue","green","yellow", "red","gray"];
    let navegadores=["Chrome","Firefox", "IE/Edge","Safari", "Otros"] ;

    pincel.fillStyle= "orange";
    pincel.fillRect(0,0,600,400);


    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 escribirText(x,y,texto){
        var pantalla = document.querySelector("canvas");
        var pincel= pantalla.getContext("2d");

        pincel.font="20px Calibri";
        pincel.fillStyle= "black";
        pincel.fillText(texto,x,y);
    }




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

         for(let i = 0; i < series.length; i++){
             console.log(series[i],colores[i]);
             dibujarRectangulo(x,y,50,series[i],colores[i]);
             y+=series[i];
             }  
          escribirText(x,y+15,texto);  

         }
     function navegador(serie,color,nav){
         let y = 50;
         let x = 350;
         for(let i = 0; i < serie.length; i ++){
             dibujarRectangulo(x, y,45,25,color[i]);
             escribirText(x,y-5,nav[i]);
             y+= 50;

         }

     }



     navegador(serie2019,colores,navegadores);
     dibujarBarra(50, 150, serie2009, colores, "2009");
     dibujarBarra(150, 150, serie2019, colores, "2019");
    </script>