Fiz meu código porém ao abrir no navegador o triângulo de dentro(branco) não aparece na imagem. onde eu errei? segue o código:
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Fiz meu código porém ao abrir no navegador o triângulo de dentro(branco) não aparece na imagem. onde eu errei? segue o código:
Felipe, seu codigo não apareceu. Tem que inserir dentro do </> ou usar o atalho (Ctrl+Alt+C). Espero ter ajudado.
Opa, segue o codigo certo agora:
<meta charset="utf-8">
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'black';
pincel.beginPath();
pincel.moveTo(50, 50);
pincel.lineTo(400, 400);
pincel.lineTo(50, 400);
pincel.fill();
pincel.fillStyle = 'white'
pincel.beginPath();
pincel.moveTo(100, 175);
pincel.moveTo(275, 350);
pincel.moveTo(100, 350);
pincel.fill();
</script>
Fala, Felipe! Tudo bem por aí?
O erro está no seguinte bloco do código...
pincel.fillStyle = 'white'
pincel.beginPath();
pincel.moveTo(100, 175);
pincel.moveTo(275, 350);
pincel.moveTo(100, 350);
pincel.fill();...onde deveríamos "desenhar" as linhas que vão formar nosso desenho, movendo o pincel do ponto onde foi iniciado até onde pretendemos que ele chegue, para depois preencher o desenho criado.
O correto seria:
pincel.fillStyle = 'white';
pincel.beginPath();
pincel.moveTo(100, 175);
pincel.lineTo(275, 350);
pincel.lineTo(100, 350);
pincel.fill();Ao invés de pincel.moveTo utilizamos pincel.lineTo.
Faça o teste por aí e me conte se deu certo.
Espero ter ajudado e continuo a disposição.