<meta charset = "UTF-8">

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

<script>

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

var serie2015 = [50, 25, 20, 5];
var serie2016 = [65, 20, 13, 2];

var cores = ['blue', 'green', 'yellow', 'red'];

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 desenhaTexto(texto, x, y)    {

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


var posicaox2015 = 50;

desenhaTexto("2015", 60, 40);

var posicaoy = 50;

for (var posicao = 0; posicao < serie2015.length; posicao ++)    {

    desenhaRetangulo(posicaox2015, posicaoy, 50, serie2015[posicao], cores[posicao]);
    posicaoy = posicaoy + serie2015[posicao];

}

var posicaox2016 = 150;

desenhaTexto("2016", 170, 40);

var posicaoy = 50;

for (var posicao = 0; posicao < serie2016.length; posicao ++)    {

    desenhaRetangulo(posicaox2016, posicaoy, 50, serie2016[posicao], cores[posicao]);
    posicaoy = posicaoy + serie2016[posicao];

}


</script>