Gráfico de Barras | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

Apoyado en el código del instructor, tratando de entender la lógica para armar las barras. Aún me falta para crear funciones desde cero, más cuando hay varios elementos involucrados.

Me tomé libertades estéticas para hacer más grandes las barras (tripliqué valores XD) y colores a gusto personal.

Gracias!

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Competencia de los navegadores</title>
  </head>
  <body>
    <style>
      body,
      html {
        background-color: #b2b4b2;
        width: auto;
        height: auto;
      }

      .header {
        font-family: monospace;
        color: black;
        text-align: center;
        margin: 50px;
        font-size: 2vh;
      }

      canvas {
        background-color: lightgray;
        border-radius: 10px;
        padding-left: 0;
        padding-right: 0;
        margin-left: auto;
        margin-right: auto;
        display: block;
      }
    </style>

    <div class="header">
      <h1>¿Cuál es el navegador más utilizado?</h1>
      <hr />
    </div>

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

    <!-- script -->
    <script>

      // FUNCIONES-------->
      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 = "italic bold 15px monospace";
        pincel.fillStyle = "black";
        pincel.fillText(texto, x, y);
      };

      function dibujarBarra(x, y, series, colores, texto) {
        escribirTexto(x -12, y - 10, texto);

        var sumaAltura = 0;
        for (var i = 0; i < series.length; i++) {
          var altura = series[i];
          dibujarRectangulo(x, y + sumaAltura, 100, altura, colores[i]);
          sumaAltura = sumaAltura + altura;
        }
      };

      // VARIABLES -------->
      var colores = ["dodgerblue", "lightseagreen", "gold", "tomato", "silver"];
      var serie2009 = [18, 141, 123, 9, 9];
      var serie2019 = [243, 27, 9, 9, 12];


      // dibujar barras -------->
      dibujarBarra(100, 50, serie2009, colores, "2009 : Firefox");
      dibujarBarra(400, 50, serie2019, colores, "2019 : Chrome");

      </script>
  </body>
</html>