Resolução Gráfico de Barras

Assim ficou minha solução para o exercício, caso tenha alguma sugestão só mandar aqui!

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

<script>


    function texto(x, y, texto) {

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

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


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

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

        pincel.fillStyle = cores;
        pincel.fillRect(x, y, largura, altura );

        pincel.fill();
        pincel.strokeRect(x, y, largura, altura );


    }


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


        texto(x, y - 10, ano) 

        var altura = 0;    
        for(var contador = 0; contador < serie.length; contador++  ){


            desenhaRetangulo(x , y + altura, 50, serie[contador], cores[contador]);
            altura = altura + serie[contador]; 

        }

    }


    var serie15 = [50, 25, 20, 5];
    var    serie16 = [65, 20, 13, 2];
    var legendas = ["Chrome", "FireFox", "Safari", "Outros"]
    var cores = ["blue", "green", "yellow", "red"];


    desenhaBarra(50, 50, serie15, cores, "2015");
    desenhaBarra(150, 50, serie16, cores, "2016");
    descriçao(35, 200, legendas, cores);

    function descriçao(x, y, browser, cores){

        var altura = 0;

        for(var contador = 0; contador < browser.length; contador++){

            desenhaRetangulo(x, y + altura, 10, 10, cores[contador]);
            texto(x + 15, y + altura + 10, browser[contador]);
            altura = altura + 30

        }

    }






</script>