canvasを使用し、複数の画像をドラッグ＆ドロップで自由に配置した後に保存したい

Question

前提・実現したいこと

ブラウザ：IE、chrome
html5のcanvasを使い、複数の画像をcanvasに配置してドラッグ＆ドロップで自由に配置した後、画像として保存したいです。

具体的には、

↑の画像のように、下地の画像の上に、画像化した文字や画像を配置していきます。

試したこと

このサイトの「Step3: 画像をドラッグで移動させる」を参考にし、ひとつの画像をドラッグ＆ドロップして自由に配置することはできました。(chromeのみ)

発生している問題

・「試したこと」で記載したサイトの「Step3: 画像をドラッグで移動させる」の以下のjavascriptコード部分を、画像一つ一つに定義する必要があるのか。その他もっと簡単にできる方法があれば知りたい。

・IEでも動かせるようにしたい。

<div id="image">
</div>
<input type="button" value="canvasを表示" onclick="OnButtonClick();" />

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();

/** ドラッグで移動 */
// ドラッグ状態かどうか
let isDragging = false;
// ドラッグ開始位置
let start = {
	x: 0,
	y: 0
};
// ドラッグ中の位置
let diff = {
	x: 0,
	y: 0
};
// ドラッグ終了後の位置
let end = {
	x: 0,
	y: 0
}

function OnButtonClick() {
	document.getElementById('image').appendChild(canvas);

	img.src = 'img/sample_3.png';　//任意の画像
	img.crossOrigin = 'anonymous';

	// Canvasを画像のサイズに合わせる
	canvas.height = 1000; //任意の高さ
	canvas.width  = 1000; //任意の幅

	// Canvasに描画する
	ctx.drawImage(img, 0, 0);

	canvas.addEventListener("mousedown", function(e){
		isDragging = true;
		start.x = event.clientX;
		start.y = event.clientY;
	});

	canvas.addEventListener("mousemove", function(e){
		if (isDragging) {
			diff.x = (event.clientX - start.x) + end.x;
			diff.y = (event.clientY - start.y) + end.y;
			redraw();
		}
	});

	canvas.addEventListener("mouseup", function(e){
		isDragging = false;
		end.x = diff.x;
		end.y = diff.y;
	});
}

function redraw() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.drawImage(img, diff.x, diff.y)
}

自分が調べた限りだと、canvasでしか画像を自由配置して保存できなさそうだったので、このような質問をさせて頂きました。
よろしくお願いします。

Answer 1

完全な解決ではないですが、自分なりの対処を。
下記のサイトを参考で複数の画像をマウスで動かすことができました。
https://qiita.com/akase244/items/b801f435e85ea67a70eb

しかし、画像ファイルをアップロードして縦(恐らく横も)にサムネを表示するような処理や、
リッチテキストエディタ等を設置した場所の下にcanvasタグを置くと、

        // ドラッグ開始
        var mouseDown = function(e) {
            // ドラッグ開始位置
            var posX = parseInt(e.clientX - canvas.offsetLeft);
            var posY = parseInt(e.clientY - canvas.offsetTop);
    
            for (var i = images.length - 1; i >= 0; i--) {
                // 当たり判定（ドラッグした位置が画像の範囲内に収まっているか）
                if (posX >= images[i].drawOffsetX &&
                    posX <= (images[i].drawOffsetX + images[i].drawWidth) &&
                    posY >= images[i].drawOffsetY &&
                    posY <= (images[i].drawOffsetY + images[i].drawHeight)
                ) {
                    dragTarget = i;
                    isDragging = true;
                    break;
                }
            }
        }

の判定処理でtrueに行かずに処理が終わってしまいます。

この原因は自分でも解決策があるなら知りたいので、別の質問として投稿する予定です。