Gráfico sem a função desenhaBarra

Olá pessoal,

De fato o entendimento dessa função desenhaBarra neste contexto é bem complexo. Fiz o meu gráfico de forma simples. Acredito que com o desenvolvimento na linguagem, essas funções se tornarão mais simples.

Abraços Antonio

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

<script>

    function desenhaTexto(x, y, texto) {

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

        pincel.font = "40px arrial";
        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);
    }



    desenhaTexto(110, 40, "2015");
    desenhaRetangulo(100, 50, 100, 150, "blue");
    desenhaRetangulo(100, 200, 100, 75, "green");
    desenhaRetangulo(100, 275, 100, 60, "yellow");
    desenhaRetangulo(100, 335, 100, 15, "red");
    desenhaTexto(410, 40, "2016");
    desenhaRetangulo(400, 50, 100, 195, "blue");
    desenhaRetangulo(400, 245, 100, 60, "green");
    desenhaRetangulo(400, 305, 100, 39, "yellow");
    desenhaRetangulo(400, 344, 100, 6, "red");



</script>