canvasで絵画機能を動的に生成したい

Question

JSで絵画機能を自由に複製できるようにしたいです。
現在ajaxからテンプレートHTMLを読み込んで絵画のHTMLが存在していれば（canvasのタグがあれば）お絵かきができるようにしたいです。

$(document).on("change", "[id=templates_number]", function(){
    略
    $.post("templates.php", {
      data : template_data,
     略
    }, function(data) {
   //dataにhtmlを入れて読み込んでいる
　　略
   //タグがcanvasならcanvasのセッティング
　 canvas = document.getElementById("canvasタグのid");
   ctx = canvas.getContext('2d');
   undoImages = [];
   pointer = -1;
   canvas.addEventListener('mousemove', draw_canvas);
　　略
   });
});

かなりコードを省略して申し訳ないです。フォームのデータ情報をjsonで読み込んでおり、それをループさせてタグのタイプがcanvasだったらそのキャンバスの設定をしたいです。
現在このような形になっています。恐らくこのままだと複数の設定ができないと思います。また、EventListenerはループの中で設定できるのか怪しいです。
JSの経験がまだ浅いので皆様の助言をお待ちしております

Answer 1

脱初心者レベルの難しい話になります。
もし理解するのが難しければJavaScriptで新しく変数を利用するときはvar(またはlet)を使うことだけ覚えてもらえればよいです。
コードの修正点としてはループ中の変数をlet宣言に直すのと、draw_canvas()関数をループ中で定義するようにすればよいかと思います。

質問文のコードが複数の<canvas>に対応できないのは、ループ中で使用している変数が「グローバル変数」になっているからであると考えられます。このままでは2回目以降の<canvas>タグで前回の値を上書きしてしまいます。
JavaScriptでは新しく変数を使用する際にvarやletを用いて変数を宣言するとその変数は「ローカル変数」となり、変数の使用できる範囲を限定して使用することができます。
文法とデータ型 - JavaScript | MDN

質問文のコードを下記のように書き換えることで、変数をローカル変数として使用し、ループによる上書きを回避できると思います。

let canvas = document.getElementById("canvasタグのid");
let ctx = canvas.getContext('2d');
let undoImages = [];
let pointer = -1;

ここで用いたletというのは、forループなどに用いる{ }←この括弧の中だけで使用できる変数を宣言しています。こうすることによって、forループがループされるたびに新しい変数が生成されることになります。
(forループ1回目の変数canvasとループ2回目の変数canvasは別物ということになります。)

注意点として、addEventListener()について、引数に与える関数draw_canvas()はforループの{ }の中で定義する必要があります。なぜなら変数canvasは{ }の中にしか存在しないからです。
また、関数の中から外へ参照する変数は、関数を定義した時点でのローカル変数になるので、変数canvasはちゃんとループごとの変数になってくれます。

Comments

[MikMik]

丁寧にご説明いただきありがとうございます！
ループ中にvarやletで定義したものは別物になるとは初めて知りました。勉強になります。おかげ様で複数のcanvasを設定できるようになりました。

[reosablo]

勉強になってもらえたようでよかったです。
補足しておくと、letは波括弧{ }で別物になりますが、varは関数function(){ }で別物になります。(varは波括弧{ }では別物にはならないので、1つの変数をループのたびに上書きすることになってしまいます。) 似てるようで違うので、詳しくは調べてみるとよいでしょう。

[reosablo]

補足の補足失礼します…。
letはvarの代わりになりますが、varをletの代わりにするのはちょっと手間がかかります。もし古いIEを動作対象外にするのであればvarは使わずすべてletにするのがよいかと思います。 https://caniuse.com/#feat=let