Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Canvas achatado e triângulo não aparece

//Código não funciona como na aula. 
//Canvas achatado e triângulo não aparece 
//Eu apaguei os resto pra ver se conseguia ajeitar o canvas
<canvas width="600" heigth="400"></canvas>

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

    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0,0,600,400);
</script>

//Código funciona normal como na aula
//Reescrevi o código umas 3 vezes e pegou não sei o porquê.
<canvas width="600" height="400"></canvas>

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

    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0,0,600,400);
</script>
2 respostas

Mateus, tome muito cuidado com a escrita! "heigth", na primeira parte, está escrito errado. No segundo script você colocou certo e aparece um retângulo de 600 por 400.

Outro erro é usar as barras duplas "//" fora do script, elas não funcionam como comentário porque estão no html, e não no script.

O código do triângulo você teria que coloca-lo aqui para saber o por que dele não aparecer. Mas é usando os comandos:

    // Começar o triângulo
    pincel.beginPath();

    // Ponto inicial do triângulo
    pincel.moveTo(x, y);

    // Primeira linha
    pincel.lineTo(x, y);

    // Segunda linha
    pincel.lineTo(x, y);

    // Preencher triângulo (irá fazer a terceira linha, caso não tenha sido declarada)
    pincel.fill();
solução!

Boa noite! Tive o mesmo problema! Logo no começo, digitamos algo errado, a palavra correta seria height e não heigth.