Consegui! ainda fiz a legenda.
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
function desenhaRetangulo(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) {
pincel.font = '20px Georgia';
pincel.fillStyle = 'black';
pincel.fillText(texto, x, y);
}
function desenhaBarra(x, y, serie, cores, texto) {
desenhaTexto(texto, x, y/2);
// deixei esse espaço entre o y e a largura para alinhar com os de baixo
desenhaRetangulo(x, y , 50, serie[0], cores[0]);
desenhaRetangulo(x, y+serie[0] , 50, serie[1], cores[1]);
desenhaRetangulo(x, y+serie[0]+serie[1] , 50, serie[2], cores[2]);
desenhaRetangulo(x, y+serie[0]+serie[1]+serie[2], 50, serie[3], cores[3]);
}
var serie2015 = [50, 25, 20, 5];
var serie2016 = [65, 20, 13, 2];
var cores = ['blue', 'green', 'yellow', 'red'];
desenhaBarra(50, 50, serie2015, cores, "2015");
desenhaBarra(150, 50, serie2016, cores, "2016");
//legenda
//sei que deve ter um jeito de fazer uma function desenhaLegenda, para nar ter que repetir tantas vezes o desenhaRatangulo e desenhaTexto
//bordas da legenda
pincel.strokeStyle = 'black';
pincel.strokeRect(290, 20, 150, 320);
//texto legenda
desenhaTexto('Legenda: ', 300, 50);
desenhaRetangulo(300, 70, 50, 50, cores[0]);
desenhaTexto('Chrome', 355, 100);
desenhaRetangulo(300, 140, 50, 50, cores[1]);
desenhaTexto('Firefox', 355, 175);
desenhaRetangulo(300, 210, 50, 50, cores[2]);
desenhaTexto('Safari', 355, 240);
desenhaRetangulo(300, 280, 50, 50, cores[3]);
desenhaTexto('Outros', 355, 315);
</script>
