Treinando e melhorando :)

Mestre, usei tudo que aprendi até agora (confesso que voltei algumas aulas para poder lembrar) e criei uma maneira mais prática na hora que os exercícios pedem para criar algo. Pode dar uma olhada ? Por que quando eu rodo ele, o primeiro X e Y ficam como undefined e não sei como resolver essa. Obrigado!

<meta charset="UTF-8">

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

<script>


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


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


function desenhaQuadrado (x,y, tamanho,cor){
    pincel.fillStyle = cor;
    pincel.fillRect (x,y,tamanho,tamanho);
    pincel.fillStroke = "black";
    pincel.strokeRect(x,y,tamanho,tamanho);


}

var quadrados = prompt ("Quantos quadrados quer que apareça?");



for (var quantidade = 1;  quantidade <= quadrados; quantidade++ ){


    var x = prompt ("Digite o valor do ângulo X do quadrado " + quantidade + "  O último foi " + x );
    var y = prompt ("Digite o valor do ângulo Y do quadrado " + quantidade + "O último foi " + y );
    var tamanho = prompt ("Digite o tamanho em pixels" + "O último foi " + tamanho);
    var cor = prompt ("Digite a cor");


    desenhaQuadrado(x,y,tamanho,cor);


}


</script>