<meta charset="utf-8">
<canvas> width = "600" height = "400"</canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
function desenhaRetangulo(x, y, largura, altura, cor) {
pincel.fillStyle = cor;
pincel.fillRect(x, y, largura, altura);
pincel.fillStroke = "black";
pincel.strokeRect(x, y, largura, altura);
}
function desenhaTexto(x, y, texto, tamanho) {
pincel.font= tamanho +'px Georgia';
pincel.fillStyle='black';
pincel.fillText(texto, x, y);
}
var serie2015 = [50, 25, 20, 5];
var serie2016 = [65, 20, 13, 2];
var cores = ['blue', 'green', 'yellow', 'red'];
function desenhaBarra(x, y, serie, cores, texto) {
var navegadores = ["Chrome", "Firefox", "Safari", "outros"];
var largura = 60;
var cores = ['blue', 'green', 'yellow', 'red'];
desenhaTexto(x, y - 10, texto, "20");
for(var posicao = 0; posicao < serie.length; posicao++) {
var altura = serie[posicao]
desenhaRetangulo(x, y, largura, altura, cores[posicao])
;
desenhaTexto(x + largura + 10, y + altura/2, "-" + navegadores[posicao], "15")
y = y + altura;
}
}
desenhaBarra(50, 50, serie2015, cores, '2015');
</script>
Consegui fazer o exercício revendo a aula do curso anterior de looping (que ainda não tá bem sedimentado, mas tá indo). Adicionei também uma legenda (e a variável de tamanho do texto, para diferenciar o nome da barra da legenda) como sugerido no início do exercício, e fiquei muito satisfeito com o feito só que não tá 100%. Se o professor (ou quem se dispor) reparar no código acima, ele gera a barra de 2015 sem problemas, mas ao tentar gerar as duas barras, aparece que não sobra lugar na tela. Já tentei mudar o tamanho no comando canvas, mas não fui bem sucedido como havia sido nos exercícios de desenho.
Esse impedimento também me atrapalhou na hora de aumentar o tamanho da altura dos retângulos afim de corrigir o tamanho das legendas (que se atropelam por causa do 2% do retangulo ''outros'', na barra 2016).
Alguma sugestão?
Fico grato,