Canvasで描画した複数画像にIDを振って保存し、再編集できるようにしたい

前提

使用ツール
M1 Mac
Ruby on Rails
Rails6
canvas
Docker

実現したいこと

canvasを利用して作成した画像（アイコン）11個にIDを振ってテーブルに保存したい。
編集画面で保存していたテーブルからそれらの画像を取得して、保存時の時の並び順を再現したい。
①画像のように画像（ユニフォームアイコン）をドラッグ&ドロップで並べ替える
②投稿ボタンを押す
③編集画面に転移した時に投稿したときの画像の並び順を再現し、編集可能とする

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

canvasを画像として保存する方法は見つかるのですが、一つ一つの画像（ユニフォームアイコン）にIDを振って、それらをテーブルに格納するための方法が見つかりません。

該当のソースコード

new.js
1window.onload = function () {
2  var canvas = document.getElementById("canvas");
3  var ctx = canvas.getContext("2d");
4  var BB = canvas.getBoundingClientRect();
5  var offsetX = BB.left;
6  var offsetY = BB.top;
7  var WIDTH = canvas.width;
8  var HEIGHT = canvas.height;
9
10  var dragok = false;
11  var startX;
12  var startY;
13
14  var img = new Image();
15  img.src = "/images/uni.jpg";
16  img.onload = () => {
17    draw();
18  }
19
20  var rects = [];
21  rects.push({
22    x: 220 - 10,
23    y: 90 - 35,
24    width: 30,
25    height: 30,
26    fill: "#444444",
27    isDragging: false
28  });
29  rects.push({
30    x: 140 - 10,
31    y: 50 - 35,
32    width: 30,
33    height: 30,
34    fill: "#ff550d",
35    isDragging: false
36  });
37  rects.push({
38    x: 60 - 10,
39    y: 90 - 35,
40    width: 30,
41    height: 30,
42    fill: "#800080",
43    isDragging: false
44  });
45  rects.push({
46    x: 100 - 10,
47    y: 150 - 35,
48    width: 30,
49    height: 30,
50    fill: "#0c64e8",
51    isDragging: false
52  });
53  rects.push({
54    x: 180 - 10,
55    y: 150 - 35,
56    width: 30,
57    height: 30,
58    fill: "#0c64e8",
59    isDragging: false
60  });
61  rects.push({
62    x: 140 - 10,
63    y: 200 - 35,
64    width: 30,
65    height: 30,
66    fill: "#0c64e8",
67    isDragging: false
68  });
69  rects.push({
70    x: 100 - 10,
71    y: 250 - 35,
72    width: 30,
73    height: 30,
74    fill: "#0c64e8",
75    isDragging: false
76  });
77  rects.push({
78    x: 180 - 10,
79    y: 250 - 35,
80    width: 30,
81    height: 30,
82    fill: "#0c64e8",
83    isDragging: false
84  });
85  rects.push({
86    x: 30 - 10,
87    y: 220 - 35,
88    width: 30,
89    height: 30,
90    fill: "#0c64e8",
91    isDragging: false
92  });
93  rects.push({
94    x: 260 - 10,
95    y: 220 - 35,
96    width: 30,
97    height: 30,
98    fill: "#0c64e8",
99    isDragging: false
100  });
101
102  draw();
103
104  function rect(x, y, w, h) {
105    ctx.beginPath();
106    ctx.rect(x, y, w, h);
107    ctx.closePath();
108    ctx.fill();
109    ctx.save();
110  }
111
112  function clear() {
113    ctx.clearRect(0, 0, WIDTH, HEIGHT);
114    ctx.save();
115  }
116
117  function draw() {
118    clear();
119    ctx.fillStyle = "#FAF7F8";
120    rect(0, 0, WIDTH, HEIGHT);
121
122    for (var i = 0; i < rects.length; i++) {
123      var r = rects[i];
124      ctx.fillStyle = r.fill;
125
126      //四角の場合
127      //rect(r.x, r.y, r.width, r.height);
128
129      //アイコンフォントの場合
130      //ctx.font = "900 " + r.width + "px 'Font Awesome 5 Free'";
131      //ctx.fillText("\uf553", r.x - 3, r.y + r.height - 2);
132
133      //画像の場合
134      ctx.drawImage(img, r.x, r.y, r.width, r.height);
135      ctx.save();
136    }
137
138  }
139  canvas.onmousedown = myDown;
140  function myDown(e) {
141    e.preventDefault();
142    e.stopPropagation();
143
144    var mx = parseInt(e.clientX - offsetX);
145    var my = parseInt(e.clientY - offsetY);
146
147    dragok = false;
148    for (var i = 0; i < rects.length; i++) {
149      var r = rects[i];
150      if (mx > r.x && mx < r.x + r.width && my > r.y && my < r.y + r.height) {
151        dragok = true;
152        r.isDragging = true;
153      }
154    }
155    startX = mx;
156    startY = my;
157  }
158
159  canvas.onmouseup = myUp;
160  function myUp(e) {
161    e.preventDefault();
162    e.stopPropagation();
163
164    dragok = false;
165    for (var i = 0; i < rects.length; i++) {
166      rects[i].isDragging = false;
167    }
168  }
169
170  canvas.onmousemove = myMove;
171  function myMove(e) {
172    if (dragok) {
173      e.preventDefault();
174      e.stopPropagation();
175
176      var mx = parseInt(e.clientX - offsetX);
177      var my = parseInt(e.clientY - offsetY);
178
179      var dx = mx - startX;
180      var dy = my - startY;
181
182      for (var i = 0; i < rects.length; i++) {
183        var r = rects[i];
184        if (r.isDragging) {
185          r.x += dx;
186          r.y += dy;
187        }
188      }
189
190      draw();
191
192      startX = mx;
193      startY = my;
194    }
195}
196};

投稿画面のhtml

new.html.erb
1<h1>新規投稿</h1>
2<!-- form_for部分 -->
3
4<%= form_for(@post) do |f| %>
5
6  <h4>タイトル</h4>
7  <%= f.text_field :title %>
8
9  <h4>カテゴリー</h4>
10  <%= f.text_field :category %>
11
12  <h4>本文</h4>
13  <%= f.text_area :body %>
14
15
16  <div>
17  <canvas id="canvas" width=300 height=300></canvas>
18  </div>
19
20  <%= f.submit '投稿', class:"btn btn-lg btn-block", id:"save-button" %>
21
22
23  <%= javascript_pack_tag 'posts/new' %>
24
25
26<% end %>

自分で調べたことや試したこと

調べ方がわかっていません。申し訳ございません。

使っているツールのバージョンなど補足情報

M1 Mac
Ruby on Rails
Rails6
webpacker
jQuery
canvas
Docker

ご教示いただければ幸いです。

yambejp

2022/06/28 03:49

SVGではだめなのでしょうか？

junjuwar

2022/07/01 12:26

すみません。SVGだとダメなのでしょうかの意味がわかっていないのですが、もう少し詳細に教えていただけますでしょうか？

yambejp

2022/07/01 12:37

svgという画像形式はレイヤー管理ができるので画像内の個別の画像を操作できますという意味です

junjuwar

2022/07/03 03:02

拡張子をjpgからsvgに変換してコードを書き換えたのですが、画面上に映らなくなってしまいました。 var img = new Image(); img.src = "/images/uni.jpg"; img.onload = () => { draw(); } ここのjpgをsvgに変更するだけではダメでしょうか