JavascriptのCanvas,lineToのボタンとテキストボックスによる座標の追加

Question

前提・実現したいこと

javascriptで図を作るシステムを作っています。
canvasのbeginpathで多角形を作るシステムです。
ボタンを押したらtextboxがその都度出て、そこに座標を入力し書くボタンを押すと、その座標の多角形を生み出すというものを作りたいのですが、lineToをボタンを押すたびに増やし、押したボタンの数だけ頂点が増えるというシステムをどうやって作るのかが分かりません。

発生している問題・エラーメッセージ

lineToの書き加え
エラーメッセージ
特になし

該当のソースコード

--Javascript--

<script>
      let canvas 
=document.getElementById("canvas");
      let context = canvas.getContext("2d");
      let add = "";
      let addd = 1;

      function addtext(){
        addd++;
        a = addd;
        b = addd;
        console.log("a");
        console.log(a);
        console.log(b);
        document.getElementById("span").innerHTML += 'x,y = <input type="text" id = "x' + a + '">,<input type="text" id = "y' + b + '"><br>';
      }
        function aaaaa(){
          console.log(document.getElementById('x' + addd).value);
          console.log(document.getElementById('y' + addd).value);
          console.log(addd);
          context.beginPath();
          context.moveTo(parseInt(document.getElementById("x1").value),parseInt(document.getElementById("y1").value));
          for (let i = 1; i < addd+1; i++) {
            context.lineTo(parseInt(document.getElementById('x' + i).value),parseInt(document.getElementById('y' + i).value));
          }
          context.closePath();
          context.fillStyle = "#00ccFF";
          context.fill();
        }

試したこと

for文の繰り返しも行いましたが、たぶんcanvasの仕様の関係上不可能だったと思われます。

補足情報（FW/ツールのバージョンなど）

特になし

Comments

[miyabi_pudding]

ソースコードはコードブロックで記載ください。
<code>ボタンで挿入される、
```
ここにコードを入れる
```
とします。

[x_x]

fill() で塗りつぶすのならクリアして最初から描きなおすべきかと。
canvas のクリア処理を入れたら問題はありますか？

Answer 1

直してみました。

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
let add = "";
let addd = 0; // 最初に ++ していて、 1 から参照しているようなので、 0 始まりにした

function addtext(){
    if (addd > 0) {
        aaaaa(); // どこで呼ぼうとしているのか分からなかったので、ここで呼ぶことにした。
    }
    addd++;
    a = addd;
    b = addd;

    // innerHTML += ... でやると入力した数値が消えるから、 appendChild にした
    var span = document.createElement('span');
    span.innerHTML = 'x,y = <input type="text" id = "x' + a + '">,<input type="text" id = "y' + b + '"><br>'
    document.getElementById("span").appendChild(span);
}

function aaaaa(){
    context.beginPath();
    context.moveTo(parseInt(document.getElementById("x1").value),parseInt(document.getElementById("y1").value));
    for (let i = 2; i < addd + 1; i++) { // 2 からにした
        context.lineTo(parseInt(document.getElementById('x' + i).value),parseInt(document.getElementById('y' + i).value));
    }
    context.closePath();
    context.fillStyle = "#00ccFF";
    context.fill();
}