<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(texto, x, y);
}
// Séries
var serie2015 = [50, 25, 20, 5]; //Graf I
var serie2016 = [65, 20, 13, 2]; //Graf II
var serie2023 = [80, 8, 6, 4, 1]; //Graf II
var cores = ['blue', 'green', 'yellow', 'red'];
var legenda = ['Chrome','Firefox','Safari','Outros'];
//------------------------------------------------------
function desenhaBarra(x, y, serie, cores, texto) {// aqui precisamos desenhar vários retângulos!
// x e y=posição inicial cores<---cores(contar) texto=vem na chamada da função
var yGraf=y+20; //Altura inicial do gráfico. O texto ficará na posição da chamada
var largura = 50; var altura = serie[0] ;
desenhaTexto (x+5,y,texto);
for (contar=0; contar<4; contar++) {
//para chamar: function desenhaRetangulo(x, y, largura, altura, cor)
//Ex.: desenhaBarra(50, 50, serie2015, cores, '2015');
altura = serie[contar];
desenhaRetangulo(x,yGraf,largura,altura,cores[contar]);
yGraf=yGraf+serie[contar];
//altura=altura+serie[contar];
}
}
//Melhoria no texto
function legendaTextoCor(x, y, texto2, cor2) {
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.font='20px Georgia';
pincel.fillStyle="cor2";
pincel.fillText(texto2, x, y);
}
var h = 33; //Espaço entre as linhas da legenda
for (contar=0; contar<4; contar++) {
//legendaTextoCor (350, 70+h*contar,legenda[contar],cores[contar]); COR não funciona
//legendaTextoCor (350, 70+h*contar,legenda[contar],"cores[contar]"); COR não funciona
legendaTextoCor (350, 70+h*contar,legenda[contar],"red"); //COR red ou qualquer outra não funciona
}
desenhaBarra(50, 50, serie2015, cores, '2015');
desenhaBarra(150, 50, serie2016, cores, '2016');
desenhaBarra(250, 50, serie2023, cores, '2023');
</script>