Minha solução.

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

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


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

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, largura, altura);
        pincel.strokeStyle = cor;
        pincel.strokeRect(x, y, largura, altura);
    }

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

    function desenhaBarra(x, y, serie, cores, texto){
        desenhaTexto(texto, x + 10, y - 10);
        for (var valor = 0; valor < serie.length; valor++) {
            desenhaQuadrado(x, y, 50, serie[valor], cores[valor]);
            y += serie[valor];
        }
    }


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

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

    desenhaTexto('* Chrome - azul', 50, 180);
    desenhaTexto('* Firefox - verde', 50, 200);
    desenhaTexto('* Safari - amarelo', 50, 220);
    desenhaTexto('* Outros - vermelho', 50, 240);

</script>