Fiz do zero pra fixar o exercício, mas não rodou. Pra verificar qual seria o erro fui colocando os trechos em forma de comentário e cheguei à função desenhaRetângulo. Mas aí vi que era questão da coordenada que eu passava ao chamar a função, x=200 e y=200, tudo ok, mas x=300 e y=300, não funciona. Então fui verificar se era o tamanho do canvas, e bingo, ao invés de 600x400, está 400x600, o que não faz sentindo. Alguém pode dar um help?
<canvas whidth="600" height="400"></canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
pincel.fillStyle = "lightgray";
pincel.fillRect(0, 0, 600, 400);
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);
}*/
//var cores = ['blue','green','yellow', 'red'];
//var serie2015 = [50,25,20,5];
//var serie2016 = [65,20,13,2];
desenhaRetangulo(300, 300, 50, 50, "green");
/*function desenhaBarras(x, y, serie, cores, texto) {
desenhaTexto(x, y - 10, texto);
//Variável para definir y do próximo retângulo (que é a soma de y mais as alturas dos retângulos anteriores):
var somaYAltura = O;
for(i = 0; i < serie.length; i++) {
var altura = serie[i];
desenhaRetangulo(x, y + somaYAltura, 50, altura, cores[i]);
somaYAltura = somaYAltura + altura;
}
}
desenhaBarras(50, 50, serie2015, cores, "2015");
desenhaBarras(150, 50, serie2016, cores, "2016");*/