javascriptの大まかな組み方で知恵を貸してください。（冗長なコードの繰り返しを防ぐ）

非常に質問しにくい内容になるのですが・・・伝わりにくいと思います、ご了承ください。
コード全文はとても長いため割愛しますが、やっている流れは以下の通り。
①canvasを描画
②input　type=fileで複数の画像を読み込み、これをcanvasにそれぞれ描画。
※その際読み込んだファイルを配列に投げ込んで処理。
③動かしたり消したりするために、mouseDownやmouseUp、果てはtouchEnd等まで適用。

javascript
1document.getElementById( "target" ).addEventListener( "change", function() {
2        var canvas  = document.getElementById('canvas');
3        var context = canvas.getContext('2d');
4//中略
5var mouseDown = function(e) {
6            // 開始位置
7            var posX = parseInt(e.clientX - canvas.offsetLeft);
8            var posY = parseInt(e.clientY - canvas.offsetTop);
9    
10            for (var i = images.length - 1; i >= 0; i--) {
11                // 当たり判定
12                if (posX >= images[i].drawOffsetX &&
13                    posX <= (images[i].drawOffsetX + images[i].drawWidth) &&
14                    posY >= images[i].drawOffsetY &&
15                    posY <= (images[i].drawOffsetY + images[i].drawHeight)
16                ) {
17                  dragTarget = i;
18                  isDragging = true;
19                  break;
20                }
21            }
22        }
23//などなど
24　　　　document.addEventListener('mousewheel', function(e) {e.preventDefault();}, {passive: false});
25        document.oncontextmenu = function () { return false; }
26        document.addEventListener('contextmenu', function(e){rightClick(e);}, false);
27        // イベント登録
28        canvas.addEventListener('mousedown', function(e){mouseDown(e);}, false);
29        canvas.addEventListener('touchstart', function(e){touchStart(e);}, false);
30        canvas.addEventListener('mousemove', function(e){mouseMove(e);}, false);
31        canvas.addEventListener('touchmove', function(e){touchMove(e);}, false);
32        canvas.addEventListener('mouseup',   function(e){mouseUp(e);},   false);
33        canvas.addEventListener('touchend',   function(e){touchEnd(e);},   false);
34        canvas.addEventListener('mouseout',  function(e){mouseOut(e);},  false);
35        canvas.addEventListener('dblclick',  function(e){mouseDBclick(e);},  false);
36        canvas.addEventListener('mousewheel',  function(e){mouseWheel(e);},  false);
37})

というような流れ。

ところがここに、「画像を読み込む」ではなく、ほかのcanvasから画像化したものを上記同様に要素として描画する必要が出てきました。

javascript
1document.getElementById("test2").addEventListener("click",function(){
2                const ImgData = localStorage.getItem("imgdata");
3                srcs.push(ImgData);
4        })

配列に加える形です。
しかしこのままでは要素の動きが果たせないので、以下mouseDownやらなにやら重複する記述を書かなければいけません。もちろん配列に入っているので、この後inputから新たにファイルを読めば横入りした画像も他同様動きを適用されますが、わざわざそのために「新しくファイルを読め」というのは不格好です。

こういった場合、何かいい手はありますでしょうか。
例えばinput　fileにjavascriptでvalueを与えてあげたら・・・。
普通にセキュリティ的に危ない動きになりますしそもそもできないように思います。
例えばVBAでいうところのgoto　mypoint的なワープ技が使えないのか。
例えば作業は面倒くさいがmoueDown等を即時関数ではなく独立した関数にして呼び出すか・・・。非常に面倒というのが正直なところです。

まず伝わるかが怪しいですが、なにかアドバイスやご指導があればお願いします。