0

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

<script>

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

    alert("lembrem-se que o limite da tela e de 600x e 400y")
    var forma = prompt("Qual forma vou desenhar?")
    var quantidadeDeFormas = parseInt(prompt("Digite a quantidade de formas"))

    function desenhaFormas(){

        while(n <= quantidadeDeFormas){

            if(forma == "quadrado"){

                var posicaoX = parseInt(prompt("Digite a posição x do quadrado"));

                var posicaoY = parseInt(prompt("Digite a posição y do quadrado"));

                var corInserida = prompt("Digite a cor do quadrado em inglês");

                var cor = "" + corInserida + "";

                var corDaBordaInserida = prompt("Digite a cor da borda do quadrado em inglês");

                var corDaBorda = ""+ corDaBordaInserida +"";

                pincel.fillStyle = cor;
                pincel.fillRect(posicaoX, posicaoY, 50, 50);

                pincel.strokeStyle = corDaBorda;
                pincel.strokeRect(posicaoX, posicaoY, 50, 50);

            }

            if(forma == "triângulo"){

                var posicaoXA = parseInt(prompt("Digite a posição xA do triângulo"));

                var posicaoYA = parseInt(prompt("Digite a posição yA do triângulo"));

                var posicaoXB = parseInt(prompt("Digite a posição xB do triângulo"));

                var posicaoYB = parseInt(prompt("Digite a posição yB do triângulo"));

                var posicaoXC = parseInt(prompt("Digite a posição xC do triângulo"));

                var posicaoYC = parseInt(prompt("Digite a posição yC do triângulo"));

                var corInserida = prompt("Digite a cor da forma em inglês");

                var cor = "" + corInserida + "";

                pincel.fillStyle = cor
                pincel.beginPath();
                pincel.moveTo(posicaoXA, posicaoYA)
                pincel.lineTo(posicaoXB, posicaoYB)
                pincel.lineTo(posicaoXC, posicaoYC)
                pincel.fill();
            }

            if(forma == "circulo"){

                var corInserida = prompt("Digite a cor da forma em inglês");

                var cor = "" + corInserida + "";

                var posicaoX = parseInt(prompt("Digite a posição x do circulo"));

                var posicaoY = parseInt(prompt("Digite a posição y do circulo"));

                var raio = parseInt(prompt("Digite o raio do seu circulo"));

                pincel.fillStyle = cor;
                pincel.beginPath();
                pincel.arc(posicaoX, posicaoY, raio, 0, 2*3.14);
                pincel.fill();

            }


            n++;
        }

    }


    desenhaFormas();
</script>