barras

<canvas width="800" height="800"></canvas>
<script>

    var plano = document.querySelector("canvas");
    var pincel = plano.getContext("2d");

    var serie2009 = [6, 47, 41, 3, 3];
    var serie2019 = [81, 9, 3, 3, 4];
    var colores = ["blue", "green", "yellow", "red", "gray"];
    var navegadores = ["Chrome", "Firefox", "IE/Edge", "Safari", "Otros"];


    function dibujaRectangulo(x, y, base, altura, color) {
        pincel.fillStyle = color;
        pincel.fillRect(x, y, base, altura);
        pincel.strokeStyle = "black";
        pincel.strokeRect(x, y, base, altura);
        pincel.fill();
    }
    function escribeTexto(x, y, texto) {
        pincel.font = "15px Georgia";
        pincel.fillStyle = "white";
        pincel.fillText(texto, x, y);

    }

    function creaIndice(x, y, navegadores, colores) {
        var posicionX = x;
        var posicionY = y;


        for (i = 0; i < navegadores.length; i++) {
            dibujaRectan(posicionX, posicionY, 25, 25, colores[i]);
            escribeTexto(posicionX, posicionY - 5, navegadores[i]);
            posicionX = posicionX + 100;


        }

    }


    function dibujaBarr(x, y, base, altura, serie, colores, anio) {

        var barraAcumulada = y;

        escribeTexto(x + 30, y - 10, anio);

        for (i = 0; i < serie.length; i++) {

            porcentajeSerie = (altura * (serie[i] / 100));


            dibujaRectangulo(x, barraAcumulada, base, porcentajeSerie, colores[i]);

            barraAcumulada = barraAcumulada + porcentajeSerie;


        }

    }

    dibujaRectan(100, 50, 550, 350)
    dibujaBarr200, 100, 100, 200, serie2009, colores, "2009");
    dibujaBarr(400, 100, 100, 200, serie2019, colores, "2019");
    creaIndi(200, 350, navegadores, colores)


</script>