Prezados estou fazendo o exercicio proposto
porem fiquei com algumas duvidas
tive que setar o a largura dentro da desenhar retangulo, entre outros ajustes tecnico.
me ajudem a melhorar o codigo por favor
<canvas width="600" height="400"></canvas>
<script>
//fazendo uma caixa cinza para melhor organização do estudo.
var tela1 = document.querySelector('canvas');
var pincel1 = tela1.getContext('2d');
pincel1.fillStyle='lightgrey';
pincel1.fillRect(0, 0, 600, 400);
// Variaveis
var nave = ['Chrome', 'Firefox', 'Safari', 'Outros'];
var serie2015 = [50, 25, 20, 5];
var serie2016 = [65, 20, 13, 2];
var cores = ['blue', 'green', 'yellow', 'red' ];
// Funções
function desenhaRetangulo(x, y, largura, altura, cor) {
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
var largura= 50; // adicionado para formar o tamanho padrão
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 +10, y-10); //Colquei esses +10 e -10 para alinhar melhor o posicionamento da palavra
}
function desenhaBarra(x, y, serie, cor, texto){
desenhaTexto(x, y, texto);
var altura= 0;
for(let index = 0; index < serie.length; index++ )
{
desenhaRetangulo(x, y+altura, x, y+serie[index], cor[index]);
altura += serie[index];
}
}
function escrevendoLegenda(x, y, nave){
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.font='15px Georgia';
pincel.fillStyle='black';
for(let i = 0; i<nave.length;i++){
desenhaRetangulo(x, y+y, 20, 20,cores[i]);
desenhaTexto(x-10, y+y, nave[i]);
y+=25;
}
}
escrevendoLegenda(250, 25, nave);
desenhaBarra(50, 50, serie2015, cores, '2015');
desenhaBarra(150, 50, serie2016, cores, '2016');
</script>