Oi gente! O meu texto não entra e não achei o erro.
<meta charset="UTF-8">
<canvas width="600" height="400"> </canvas>
<script>
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 (x, y, texto) {
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
pincel.font = "15px Georgia";
pincel.fillStyle = "black";
pincel.fillText(x, y, texto);
}
function desenhaBarra(x, y, serie, cores, texto) {
desenhaTexto(x, y -10 , texto); // o menos 10 é a posição acima da barra
var somaAltura = 0; // tem que ser zero porque vai ir somando com a altura para as barras entrarem no lugar certo. // soma as alturas da série 50, depois + 25, depois + 20
//o length para termos sempre o array atual no for(): São 4.
// abaixo é a base para o código selecionar as séries e as cores
for (var i = 0; i < serie.length; i++) {
var altura = serie[i];
desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);
somaAltura = somaAltura + altura;
// o i é usado para as séries e cores poderem seguir o cálculo.
}
}
var cores = ['blue','green','yellow', 'red'];
var serie2015 = [50,25,20,5];
var serie2016 = [65,20,13,2];
desenhaBarra(50, 50, serie2015, cores, '2015');
desenhaBarra(150, 50, serie2016, cores, '2016');
</script>
Obrigada.