Ciao, la funzione createInput genera i campi in base al numero di vertici.
Spero vada bene.

codice:
<!DOCTYPE>
<html><head>

<style>
body { font:13px Arial; }
input { width:80px; padding:6px; margin:2px 8px 8px 0; }

</style>
<script>

var num;
 _e=function(l){ return document.getElementById(l) }
isNum=function(n) { return (!isNaN(n) && !isNaN(parseFloat(n))) };


createInput=function(){
   var r, n, s="";

   num=parseInt(_e("id_n").value)||0;
   if(!num || num<3) { alert("Numero vertici errato!"); return; }

   // crea num campi di input
   for(r=0; r<num; r++){
      s+="x"+r+" <input id='id_x"+r+"' /><br>"+
         "y"+r+" <input id='id_y"+r+"' /><br><br>";
   }

   s+="<button onclick='drawPoly()'>Disegna poligono</button>";

   _e("id_wrap").innerHTML=s;
 },



drawPoly=function(){
  var r, c, x,y, p=[];

  for(r=0; r<num; r++){
    x=_e("id_x"+r).value;
    y=_e("id_y"+r).value;
    if(!isNum(x) || !isNum(y) ){  alert("inserire solo numeri!"); return; }
    p[r*2]=+x;
    p[r*2+1]=+y;
  }

  c=_e("id_cnv").getContext("2d");
  c.strokeStyle="#A00";
  c.clearRect(0,0,400,400);

  c.beginPath();
  c.moveTo(p[0], p[1]);

  for(r=1; r<num; r++) c.lineTo(p[r*2], p[r*2+1]);

  c.lineTo(p[0], p[1]);
  c.closePath();
  c.stroke();
}

</script>
</head>
<body>

N. <input id='id_n' value=3 />
<button onclick='createInput()'>Nuovo poligono</button>
<br><br>
<div id='id_wrap' style='width:240px;'></div>
<canvas id='id_cnv' style='position:absolute;left:200px;top:80px;border:1px solid #AAA;' width='400' height='400'></canvas>

</body>
</html>