Gráfico de Barras com Legenda

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

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

    function desenhaQuadrado(x, y, largura, altura, cor) {

        pincel.fillStyle=cor;
        pincel.fillRect(x,y,largura,altura);
        pincel.strokeStyle = "black";
        pincel.strokeRect(x,y,largura,altura);
    }

    function desenhaTexto(texto, x , y,font) {

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

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

        desenhaTexto (texto, x+25 , y+325,'16px Georgia');

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

    function desenhaLegenda (x,y,cores,texto) {

        var somaAltura=0;
        var altura=15;
        for (var i=0;i<cores.length;i++) {

            desenhaQuadrado (x,y+somaAltura,15,altura,cores[i]);
            somaAltura=somaAltura+altura+10;
        }
        var somaAltura=0;
        var altura=15;
        for (var i=0;i<texto.length;i++) {

            desenhaTexto (texto [i], x+25, y+somaAltura+15, "14px Georgia");
            somaAltura=somaAltura+altura+10;
        }
    }

    var cores = ['red','yellow','green','blue'];
    var serie2015 = [15,60,75,150];
    var serie2016 = [6,39,60,195];
    var texto = ['Outros','Safari','Firefox','Chrome'];

    desenhaBarra (100,50,serie2015,cores, "2015");
    desenhaBarra (220,50,serie2016,cores, "2016");

    desenhaLegenda (380,245,cores,texto);


</script>