1
resposta

Meu triangulo um pouco maior para praticar

<canvas width="600" height= "600"> </canvas>

<script>

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

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


    pincel.fillStyle = "black"
    pincel.beginPath();
    pincel.moveTo(100, 150);
    pincel.lineTo(100, 600);
    pincel.lineTo(450, 600);
    pincel.fill();

    pincel.fillStyle = "pink"
    pincel.beginPath();
    pincel.moveTo(150, 300);
    pincel.lineTo(150, 550);
    pincel.lineTo(350, 550);
    pincel.fill();


</script>
1 resposta

Legal Jônatas, agora para praticar mais que tal colocar um círculo amarelo na parte superior direita? vou tentar aqui também

<canvas width="600" height= "600"> </canvas>

<script>

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

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


    pincel.fillStyle = "black"
    pincel.beginPath();
    pincel.moveTo(100, 150);
    pincel.lineTo(100, 600);
    pincel.lineTo(450, 600);
    pincel.fill();

    pincel.fillStyle = "pink"
    pincel.beginPath();
    pincel.moveTo(150, 300);
    pincel.lineTo(150, 550);
    pincel.lineTo(350, 550);
    pincel.fill();

    pincel.fillStyle = "yellow"
    pincel.beginPath()
    pincel.arc(500, 90, 50, 0, 2 * 3.14)
    pincel.fill()


</script>