Exercício feito

Por enquanto o código está assim. Mesmo assim seria ótimo um vídeo explicando esta atividade!

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

<script>



  function desenhaRetangulo(x, y, largura, altura, cor){

   var tela = document.querySelector('canvas');
   var pincel = tela.getContext('2d');

   pincel.fillStyle = cor;
   pincel.fillRect(x, y, 50, altura);

   pincel.strokeStyle = 'black';
   pincel.strokeRect(x, y, 50, altura);
  }


  function desenhaTexto(x, y, texto){

   var tela = document.querySelector('canvas');
   var pincel = tela.getContext('2d');

   pincel.font = '15px Georgia';
   pincel.fillStyle = 'black';
   pincel.fillText(texto, x, y);
  }


  var serie2020 = [50, 25, 20, 5];
  var serie2021 = [65, 20, 13, 2];
  var cores = ['blue', 'green', 'yellow', 'red'];
  var navegadores = ['Chrome', 'Firefox', 'Safari', 'Outros'];

  function desenhaBarra(x, y, serie, cores,  texto){

    desenhaTexto(x, y - 10, texto);


    var somaAltura = 0;
    var i = 0;

    while(i < serie.length){

      var altura = serie[i];
      desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);
      somaAltura = somaAltura + altura;
      i++
    }
  }


  desenhaBarra(50, 50, serie2020, cores, '2020');
  desenhaBarra(150, 50, serie2021, cores, '2021');

</script>