Fabric.jsを使用してcanvasを複数設置したいが、二つめのcanvasにレイヤーが作成されない

実現したいこと

GASを利用したwebページ作成の一環で、canvasを利用し自由描画とテキストのみ配置の二種類のスペースを作成したいです。
できればFabric.jsを使用していきたいです。

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

一つ目の自由描画のcanvasは問題なく動作しますが、二つ目のテキスト配置のcanvasは配置したテキストが表示されません。

試したこと

Chromeの開発ツールでみてみると、id:csnvas-finalの方は.lower-canvasと.upper-canvasどちらの要素も加わっておらず、レイヤーが作成されていない状況になります。
classm名を分けてもだめでした。

該当のソースコード

HTML＆Jquery
1<!DOCTYPE html>
2<html>
3
4<head>
5  <base target="_top">
6  <?!=HtmlService.createHtmlOutputFromFile('css.html').getContent(); ?>
7  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
8  <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
9  <!---HTML5 canvasのフレームワーク--->
10  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.min.js"></script>
11</head>
12
13<body>
14  <div>
15    <br>
16    <center>
17
18      <h1>自由描画ウィンドウ</h1>
19      <label style="font-size: 20px; color: red;"> <input id="drawing" type="checkbox"
20              checked><b>編集</b></label><br><br>
21
22
23      <div style="padding:10px">
24        <button id="delete" style="display:none">選択範囲削除</button>
25      </div>
26      <canvas id="canvas-id" width="800" height="400" class="canvas1"></canvas>
27      <div style="padding:10px">
28        <button type="button" onclick="chgImg()" value="1">画像変換</button>
29        <h2>画像出力欄</h2>
30        <div id="img-box"><img id="newImg"></div>
31
32      </div>
33
34      <h1>テキスト</h1>
35        <canvas id="canvas-final" width="800" height="1000" class="canvas2"></canvas>
36      </div>
37
38
39  </div>
40
41
42  <script>
43    const buttonOpen = document.getElementById('modalOpen');
44      const modal = document.getElementById('easyModal');
45      const buttonClose = document.getElementsByClassName('modalClose')[0];
46
47 
48
49      /*----------------------------------
50      自由描画スクリプト
51      -----------------------------------*/
52
53      //htmlで作ったcanvas要素をidで指定して、canvasオブジェクトを生成。
54      const canvas = new fabric.Canvas("canvas-id");
55
56      //フリードローイングを可能にする
57      canvas.isDrawingMode = true;
58
59      //ペンサイズの設定
60      canvas.freeDrawingBrush.width = 5; // 描画する線の太さ
61
62
63
64      document.getElementById("drawing").addEventListener("click", function () {
65        canvas.isDrawingMode = canvas.isDrawingMode ? false : true;
66        canvas.discardActiveObject();
67        canvas.requestRenderAll();
68      });
69
70      fabric.Object.prototype.set({
71        borderScaleFactor: 6
72      });
73
74      //オブジェクトを選択してデリートを行う
75      const deleteBtn = document.getElementById("delete");
76
77      deleteBtn.addEventListener("click", function () {
78        deleteSelectedObjects();
79      });
80
81      canvas.on("selection:created", function () {
82        deleteBtn.style.display = "inline-block";
83      });
84
85      canvas.on("selection:cleared", function () {
86        deleteBtn.style.display = "none";
87      });
88
89      function deleteSelectedObjects() {
90        var selection = canvas.getActiveObjects();
91        selection.forEach((obj) => {
92          canvas.remove(obj);
93        });
94
95        canvas.requestRenderAll();
96      }
97
98      document.addEventListener("keyup", function (e) {
99        console.log(e.keyCode);
100        if (e.keyCode == 8 | e.keyCode == 46) {
101          deleteSelectedObjects();
102        }
103      });
104
105      //初期値（サイズ、色、アルファ値）の決定
106      var defSize = 2,
107        defColor = "#555";
108
109      //フリードローイングを可能にする
110      canvas.isDrawingMode = true;
111
112      //初期値（サイズ、色、アルファ値）の決定
113      var defSize = 7,
114        defColor = "#555";
115
116
117      //モーダルコンテンツ以外がクリックされた時
118      addEventListener('click', outsideClose);
119      function outsideClose(e) {
120        if (e.target == modal) {
121          modal.style.display = 'none';
122        };
123      };
124
125      //バツ印がクリックされた時
126      buttonClose.addEventListener('click', modalClose);
127      function modalClose() {
128        modal.style.display = 'none';
129      };
130
131      function chgImg() {
132        var png = canvas.toDataURL();
133
134        document.getElementById("newImg").src = png;
135      }
136
137      function initLocalStorage() {
138        myStorage.setItem("__log", JSON.stringify([]));
139      }
140      function setLocalStoreage() {
141        var png = canvas.toDataURL();
142        var logs = JSON.parse(myStorage.getItem("__log"));
143
144        setTimeout(function () {
145          logs.unshift({ 0: png });
146
147          myStorage.setItem("__log", JSON.stringify(logs));
148
149          currentCanvas = 0;
150          temp = [];
151        }, 0);
152      }
153
154      /*----------------------------------
155      テキスト
156      -----------------------------------*/
157      var canvasf = new fabric.Canvas('canvas-final');
158
159      var textObj = new fabric.Text('Hello Text!', {
160        fontFamily: 'Delicious_500',
161        left: 400,
162        top: 225,
163        fontSize: 80,
164        textAlign: "left",
165        fill: "#FF0000"  // Set text color to red
166      });
167
168      canvasf.add(textObj);
169
170
171  </script>
172  </main>
173</body>
174
175</html>

CSS
1<style>
2  header {
3    background: #fff;
4  }
5
6  body {
7    font-family: "Open Sans", sans-serif;
8    line-height: 1.25;
9  }
10
11
12  canvas {
13    border: 3px solid #000;
14  }
15</style>

行動規範の内容に同意します

回答1件

自己解決

正直何故かはわかりませんが、一応動作しました。
Scriptのテキスト部分を自由描画スクリプトの上に持ってくればOKだったみたいです。

HTML＆Javascript
1 <script>
2    const buttonOpen = document.getElementById('modalOpen');
3      const modal = document.getElementById('easyModal');
4      const buttonClose = document.getElementsByClassName('modalClose')[0];
5
6 
7
8     /*----------------------------------
9      テキスト
10      -----------------------------------*/
11      //htmlで作ったcanvas要素をidで指定して、canvasオブジェクトを生成。
12      const canvasf = new fabric.Canvas("canvas-final");
13
14
15      var textObj = new fabric.Text('Hello Text!', {
16        fontFamily: 'Delicious_500',
17        left: 400,
18        top: 225,
19        fontSize: 80,
20        textAlign: "left",
21        fill: "#FF0000"  // Set text color to red
22      });
23
24      canvasf.add(textObj);
25
26       /*----------------------------------
27      自由描画スクリプト
28      -----------------------------------*/
29
30      //htmlで作ったcanvas要素をidで指定して、canvasオブジェクトを生成。
31      const canvas = new fabric.Canvas("canvas-id");
32
33      //フリードローイングを可能にする
34      canvas.isDrawingMode = true;
35
36      //ペンサイズの設定
37      canvas.freeDrawingBrush.width = 5; // 描画する線の太さ
38
39
40
41      document.getElementById("drawing").addEventListener("click", function () {
42        canvas.isDrawingMode = canvas.isDrawingMode ? false : true;
43        canvas.discardActiveObject();
44        canvas.requestRenderAll();
45      });
46
47      fabric.Object.prototype.set({
48        borderScaleFactor: 6
49      });
50
51      //オブジェクトを選択してデリートを行う
52      const deleteBtn = document.getElementById("delete");
53
54      deleteBtn.addEventListener("click", function () {
55        deleteSelectedObjects();
56      });
57
58      canvas.on("selection:created", function () {
59        deleteBtn.style.display = "inline-block";
60      });
61
62      canvas.on("selection:cleared", function () {
63        deleteBtn.style.display = "none";
64      });
65
66      function deleteSelectedObjects() {
67        var selection = canvas.getActiveObjects();
68        selection.forEach((obj) => {
69          canvas.remove(obj);
70        });
71
72        canvas.requestRenderAll();
73      }
74
75      document.addEventListener("keyup", function (e) {
76        console.log(e.keyCode);
77        if (e.keyCode == 8 | e.keyCode == 46) {
78          deleteSelectedObjects();
79        }
80      });
81
82      //初期値（サイズ、色、アルファ値）の決定
83      var defSize = 2,
84        defColor = "#555";
85
86      //フリードローイングを可能にする
87      canvas.isDrawingMode = true;
88
89      //初期値（サイズ、色、アルファ値）の決定
90      var defSize = 7,
91        defColor = "#555";
92
93
94      //モーダルコンテンツ以外がクリックされた時
95      addEventListener('click', outsideClose);
96      function outsideClose(e) {
97        if (e.target == modal) {
98          modal.style.display = 'none';
99        };
100      };
101
102      //バツ印がクリックされた時
103      buttonClose.addEventListener('click', modalClose);
104      function modalClose() {
105        modal.style.display = 'none';
106      };
107
108      function chgImg() {
109        var png = canvas.toDataURL();
110
111        document.getElementById("newImg").src = png;
112      }
113
114      function initLocalStorage() {
115        myStorage.setItem("__log", JSON.stringify([]));
116      }
117      function setLocalStoreage() {
118        var png = canvas.toDataURL();
119        var logs = JSON.parse(myStorage.getItem("__log"));
120
121        setTimeout(function () {
122          logs.unshift({ 0: png });
123
124          myStorage.setItem("__log", JSON.stringify(logs));
125
126          currentCanvas = 0;
127          temp = [];
128        }, 0);
129      }
130  </script>