Fração com "legenda"

<meta charset="utf-8">
<canvas width="800" height="800"></canvas>

<script>

    function retangulo(x,y,largura, altura, cor, texto){
    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='30px Time New Roman';
    pincel.fillStyle='black';
    pincel.fillText(texto, x, y);
    }

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

        desenhaTexto(x,y-10,texto);

        var somaAltura = 0

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

        }
    }

    function info(x,y,a,b, cores, texto){

        desenhaTexto(x-10, y-15, texto);

        var distancia = 0

        for (var d = 0; d < navegadores.length; d++ ){
            var dist = navegadores[d];
            retangulo(x+distancia, y, a, b, cores[d], navegadores[d]);
            distancia=distancia+x
        }

    };

    var navegadores = ['Chorme', '    Firefox', '         Safari', '        Outros...'];
    var serie2015 = [50,25,20,5];
    var serie2016 = [65,20,13,2];
    var cores = ['blue','green','yellow', 'red'];

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

</script>