Crear Semaforo

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

<script>
    var screen = document.querySelector("canvas");
    var pen = screen.getContext("2d");
    var numCuadros = 1;
    var posicionX = parseInt(prompt("Ingresa la Posicion")); //captura la PosicionX
    var colorNum1 = prompt("Ingresa el Color Numero 1") //Captura el Color de la Linea 1
    var colorNum2 = prompt("Ingresa el Color Numero 2") //Captura el Color de la Linea 2
    var colorNum3 = prompt("Ingresa el Color Numero 3") //Captura el Color de la Linea 3


    function linea1(posicionX){

        //Se puede Aplicar while o for segun se desee se deja con las dos para que se te facilite las alternativas

       // while(posicionX < 600){
       // var posicionY = 50;
        //pen.fillStyle= colorNum1;
        //pen.fillRect(posicionX,posicionY,50,50);
        //pen.strokeStyle = "black";
        //pen.strokeRect(posicionX,posicionY,50,50);

       // posicionX = posicionX + 50;
    //}

      for(posicionX; posicionX < 600; posicionX = posicionX + 50 ){
        var posicionY = 50;
        pen.fillStyle= colorNum1;
        pen.fillRect(posicionX,posicionY,50,50);
        pen.strokeStyle = "black";
        pen.strokeRect(posicionX,posicionY,50,50);
      }

    }

    function linea2(posicionX){
        while(posicionX < 600){
        var posicionY = 100;
        pen.fillStyle= colorNum2;
        pen.fillRect(posicionX,posicionY,50,50);
        pen.strokeStyle = "black";
        pen.strokeRect(posicionX,posicionY,50,50);

        posicionX = posicionX + 50;
    }

    }

    function linea3(posicionX){
        while(posicionX < 600){
        var posicionY = 150;
        pen.fillStyle= colorNum3;
        pen.fillRect(posicionX,posicionY,50,50);
        pen.strokeStyle = "black";
        pen.strokeRect(posicionX,posicionY,50,50);

        posicionX = posicionX + 50;
    }

    }

    linea1(posicionX)
    linea2(posicionX)
    linea3(posicionX)
    </script>