Gráfico + nome dos navegadores + porcentagem equivalente

Fiz esse código colocando o navegador do lado, e a porcentagem equivalente dele. Tive dificuldade quanto a centralizar em cada espaço (não consegui fazer), e também a falta de espaço em alguns retângulos. Aceito dicas de como melhorar isso. Segue o código:

<canvas width="600" height="400"></canvas>
<script>
    var tela=document.querySelector("canvas");
    var pincel=tela.getContext("2d");

    var navegador=["chrome","firefox","safari","outros"];
    var cores=["blue","green","yellow","red"];

    var nav2015=[50,25,20,5];
    var nav2016=[65,20,13,2];

    function desenharRetangulo(x,y,largura,altura,cor){
        pincel.fillStyle=cor;
        pincel.fillRect(x,y,largura,altura);

        pincel.fillStroke="black";
        pincel.strokeRect(x,y,largura,altura);
    }

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

    function desenharBarra(x,y,ano,cor,texto){

        desenharTexto(x,y-10,texto);

        var somaAltura=0;
        for(i=0;i<ano.length;i++){
            var altura=ano[i];
            desenharRetangulo(x,y+somaAltura,50,altura,cores[i]);
            desenharTexto(x+60,(y+somaAltura)+5,navegador[i]); //nome do navegador
            desenharTexto(x+15,(y+somaAltura)+10,ano[i]+"%"); // porcentagem equivalente
            somaAltura+=altura;
            console.log(altura)
        }
    }

    desenharBarra(50,50,nav2015,cores,"Navegadores de 2015");
    desenharBarra(300,50,nav2016,cores,"Navegadores de 2016");
</script>