Triangulo não aparece | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

2
respostas

por Gustavo De Faria

| 37.9k xp | 39 posts

Jovem aprendiz

Vi e re vi e não rei o motivo do triangulo não aparecer

        <script>
            var desenho = document.querySelector('canvas')
            var pincel = desenho.getContext('2d')

            pincel.fillStyle = 'green'
            pincel.fillRect(0,0,100,400)

            pincel.fillStyle = 'white'
            pincel.fillRect(100,0,100,400)

            pincel.fillStyle = 'red'
            pincel.fillRect(200,0,100,400)

            pincel.fillRect = 'yellow';
            pincel.beginPath();
            pincel.moveTo(300, 200);
            pincel.lineTo(200, 400);
            pincel.lineTo(400, 400);
            pincel.fill();
        </script>

2 respostas

por Guilherme Henrique

| 732.8k xp | 2109 posts

Instrutor

20/04/2022

Oi Gustavo

Qual é o tamanho que você definiu na tag canvas?

Outro detalhe é sobre a cor yellow, está sendo atribuída ao fillRect e deveria ser ao fillStyle

por Davi Leal Da Costa

| 87.2k xp | 21 posts

20/04/2022

Há dois fatores que estão impedindo o triângulo de aparecer. O primeiro é que na hora de mudar a cor do pincel para yellow você usou fillRect, ao invés de fillStyle. O outro são as coordenadas que você usou para desenhar o triângulo. Do jeito que estão, vai ser desenhado um triângulo fora da posição no canvas. Segue o seu trecho de código com as correções aplicadas:

<script>
    var desenho = document.querySelector('canvas')
    var pincel = desenho.getContext('2d')

    pincel.fillStyle = 'green'
    pincel.fillRect(0, 0, 100, 400)

    pincel.fillStyle = 'white'
    pincel.fillRect(100, 0, 100, 400)

    pincel.fillStyle = 'red'
    pincel.fillRect(200, 0, 100, 400)

    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(150, 200);
    pincel.lineTo(200, 400);
    pincel.lineTo(100, 400);
    pincel.fill();
  </script>