5
respostas

Retangulo não obedece a medida aplicada no código.

Fala galera blz? Praticando juntamente com o professor Flávio durante a aula, porém, o meu retangulo nao fica com as medidas de 600x400. Abrindo o console no navegador consigo visualizar a medida correta no código, mas o resultado é um retangulo de 600x150. Alguem consegue me indicar onde esta o problema?

5 respostas

Boa noite Walter Netto! Tudo bem contigo? Espero que sim.

Cara, eu estou tendo um problema semelhante ao seu. No meu caso o retângulo verde está maior que o valor informado na função "fillRect" e a cor vermelha nem aparece.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");

pincel.fillStyle = "lightgrey";
pincel.fillRect(0, 0, 600, 400);

pincel.fillStyle = "green";
pincel.fillRect(0, 0, 200, 400);

pincel.fillStyle = "red";
pincel.fillRect(400, 0, 200, 400);

Hei Alef!! você colocou o cinza com 600 de px e não 200, por isso o cinza cobre o verde, acredito que assim vai funcionar:

var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");

pincel.fillStyle = "lightgrey";
pincel.fillRect(0, 0, 200, 400);

pincel.fillStyle = "green";
pincel.fillRect(0, 0, 200, 400);

pincel.fillStyle = "red";
pincel.fillRect(400, 0, 200, 400);

Olá Alef, acredito que o problema que para as medidas que vocês pôs para preencher o canvas estão extrapolando o espaço, sugiro você diminuir as medidas.

var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");

pincel.fillStyle = "lightgrey";
pincel.fillRect(0, 0, 100, 200);

pincel.fillStyle = "green";
pincel.fillRect(100, 0, 100, 200);

pincel.fillStyle = "red";
pincel.fillRect(200, 0, 100, 200);

Olá Walter, você poderia nos mostrar o código? pode conferir se você escreveu width e height corretamente? Já aconteceu um erro similar comigo devido a erro de digitação.

Boa noite pessoal!

Muito obrigado!

Funcionou direito!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software