Exercício feito

Esse esgotou meu cérebro. Seria legal se tivesse sido explicado em vídeo ao longo das aulas. Mas achei bem legal depois que funcionou. kkkk Vou procurar outras formas agora.

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

<script>

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

var serie2015 = [50, 25, 20, 5];
var serie2016 = [65, 20, 13, 2];
var cores = ["blue", "green", "yellow", "red"];
var navegadores = ["Chrome", "Firefox", "Safari", "Outros"];

function desenhaTexto(txt, fonte, a, b) {

    lapis.font = fonte;
    lapis.fillStyle = "black";
    lapis.fillText(txt, a, b);

}

function desenhaRect(x, y, larg , alt, cor) {

    lapis.fillStyle = cor;
    lapis.fillRect(x, y, larg, alt);
    lapis.strokeStyle = "black";
    lapis.strokeRect(x, y, larg, alt);

}

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

    desenhaTexto(texto,"20px Georgia", x, y - 10);

    for(var linha = 0; linha < serie.length; linha++) {

        desenhaRect(x, y, 50, serie[linha], cor[linha]);
        y = y + serie[linha]; 

    }

}

function criaLegenda(x, y, cor, texto) {

    for(var i = 0; i < cor.length; i++) {

        desenhaRect(x, y, 10, 10, cores[i]);
        desenhaTexto(texto[i], "15px Georgia", x + 15, y + 10);
        y = y + 20; 
    }
}

desenhaBarra(50, 100, serie2015, cores, "2015");
desenhaBarra(150, 100, serie2016, cores, "2016");
criaLegenda(250, 130, cores, navegadores);
desenhaTexto("Navegadores mais utilizados pelxs alunxs da Alura", "25px Georgia", 25, 35);


</script>