<meta charset="UTF-8">

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

<script>


    function rep_quadrado(x,y,cor,t1,t2) {


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

    var cor1 = prompt("Digite a cor quadrado em inglês:"); // define a cor dos quadrados

    var px = prompt(" Digite a posicao x do quadrado (horizontal)");

    var py = prompt(" Digite a posicao y do quadrado (vertical)");

    var t1 = prompt( " Digite o tamanho do quadrado na horizontal:")

    var t2 = prompt( " Digite o tamanho do quadrado na vertical:")

    pincel.fillStyle=cor1; // define a cor do pincel
    pincel.fillRect(px,py,t1,t2); // define o tananho 
    pincel.fillStroke = "black"; // define a cor da borda
        //pincel.strokeRect(px,py,100,100); // define a borda do stroke, retirei para melhor entendimento.

    }
            rep_quadrado(0,0,0,0,"green");
            rep_quadrado(50,51,0,0,"blue");
            rep_quadrado(100,101,0,0,"yellow");

        console.log(rep_quadrado);

document.write( "****** FIM *******");

</script>