Barras

Fiz sem usar a função desenhaBarra();

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

<meta charset="UTF-8">

<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, largura, altura);
        pincel.strokeStyle = 'black';
        pincel.strokeRect(x, y, largura, 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);    
    }

   desenhaRetangulo(50, 50, 50, 50, 'blue');
    desenhaRetangulo(50, 100, 50, 25, 'green');
    desenhaRetangulo(50, 125, 50, 20, 'yellow');
    desenhaRetangulo(50, 138, 50, 5, 'red');

    desenhaRetangulo(120, 50, 50, 65, 'blue');
    desenhaRetangulo(120, 115, 50, 20, 'green');
    desenhaRetangulo(120, 130, 50, 13, 'yellow');
    desenhaRetangulo(120, 140, 50, 2, 'red');

    desenhaTexto(60, 40, '2015');
    desenhaTexto(130, 40, '2016');

</script>

Fiz também com a função desenhaBarra(); Porém com algumas informações a mais só para me testar. Não ficou aquele código que se diga " olha que código", mas ficou bom.

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

<meta charset="UTF-8">

<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, largura, altura);
        pincel.strokeStyle = 'black';
        pincel.strokeRect(x, y, largura, 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);    
    }


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

           desenhaTexto(x, y, texto);

           var somaAltura = 0;

           for(var i = 0; i < serie.length; i++){
               var altura = serie[i];
               desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);
               somaAltura = somaAltura + altura;    
           }

   }

   var cores = ['blue', 'green', 'yellow', 'red'];
   var serie2015 = [50,25,20,5];
   var serie2016 = [65,20,13,2];

   desenhaBarra(50, 50, serie2015, cores, '2015');
   desenhaBarra(300,50, serie2016, cores, '2016');

   desenhaTexto(100, 80, ' Chrome');
   desenhaTexto(100, 115, ' Firefox');
   desenhaTexto(100, 140, ' Safari');
   desenhaTexto(100, 155, 'outros');

   desenhaTexto(350, 80, ' Chrome');
   desenhaTexto(350, 115, ' Firefox');
   desenhaTexto(350, 140, ' Safari');
   desenhaTexto(350, 155, ' outros');



</script>