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でしか画像を自由配置して保存できなさそうだったので、このような質問をさせて頂きました。
よろしくお願いします。