Só consegui resolver dessa maneira, está correto?

Só consegui resolver dessa maneira, ainda pode ser considerado como um acerto?

 <meta charset="UTF-8">
 <canvas width="600" height="400"></canvas>

<script>

     function desenhaTexto(texto, x, y){

        var tela = document.querySelector("canvas");
        var pincel = tela.getContext("2d");
        pincel.font = "20px Georgia";
        pincel.fillStyle = "black";
        pincel.fillText(texto, x, y);
    }

    function desenhaLegendas(texto, x, y){

        // função utilizada para escrever com uma fonte menor
        var tela = document.querySelector("canvas");
        var pincel = tela.getContext("2d");
        pincel.font = "10px Georgia";
        pincel.fillStyle = "black";
        pincel.fillText(texto, x, y);
    }

    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 serie2015(){

        desenhaRetangulo(200, 100, 70, 100, "blue");
        desenhaRetangulo(200, 200, 70, 50, "green");
        desenhaRetangulo(200, 250, 70, 40, "yellow");
        desenhaRetangulo(200, 290, 70, 10, "red");
    }

    function serie2016(){

        desenhaRetangulo(350, 100, 70, 130, "blue");
        desenhaRetangulo(350, 230, 70, 40, "green");
        desenhaRetangulo(350, 270, 70, 26, "yellow");
        desenhaRetangulo(350, 296, 70, 4, "red");
    }        

        desenhaTexto("2015", 200, 80);
        desenhaTexto("2016", 350, 80); 
        serie2015();
        serie2016();

        desenhaTexto("Gráfico do uso de navegadores de alunos da Alura em 2015/2016", 30, 20);
        desenhaRetangulo(45, 290,  93, 45, "white"); // utilizei para fazer uma pequena moldura em para as legendas  
        desenhaLegendas("Azul = Chrome", 50, 300);
        desenhaLegendas("Verde = Firefox", 50, 310);
        desenhaLegendas("Amarelo = Safari", 50, 320);
        desenhaLegendas("Vermelho = Outros", 50, 330);

    </script>