Da forma abaixo o retângulo não aparece: "
<canvas id="tela" width="600" height="400"></canvas>
<input/><button>Informe o tamanho</button>
<script>
var segmento = function(x,y,xFinal,yfinal) {
var tela = document.getElementById("tela");
var c = tela.getContext("2d");
c.fillStyle="black";
c.fillRect(x, y, xFinal, yfinal);
};
function tamanho2(){
return tamanho3.value;
}
var tamanho3 = document.querySelector("input");
var button = document.querySelector("button");
button.onclick = tamanho2;
var x = 0;
var xFinal = 2;
var yFinal = 390;
var tamanho = tamanho2;
var y = 25;
if (x < xFinal) {
while(x < tamanho) {
segmento(x, yFinal,50,y);
x = x + 50;
}
} else {
while(x < xFinal) {
segmento(x, yFinal,50,y);
x = x + 50;
}
}
</script>