javascriptのquerySelectorAllにクリックイベントを付与したいが、回数がおかしい

Question

バニラでのコーディングを勉強中です。
読み込んだ画像に対してaddEventListenerで「クリックしたらcanvasに描画」を記述したいと思っています。canvasにはfabricを使っていますが、今回の質問には関連しないと思います。

document.getElementById( "target" ).addEventListener( "change", function() {
	var fileList = this.files ;
	var num = 100;
	for( var i=0,l=fileList.length; l>i; i++ ) {
		var blobUrl = window.URL.createObjectURL( fileList[i] ) ;

        document.getElementById('Hikidasi').insertAdjacentHTML('beforeend','<img id="' + i + '" class="Htool" src="' + blobUrl + '" style="width:5vw">');
        document.querySelectorAll('.Htool').forEach(function(cards){
        cards.addEventListener('click',function(){
            console.log(cards.src);
            fabric.Image.fromURL(cards.src, function(oImg) {
            oImg.scaleToWidth(Can.width*0.1);
	        oImg.set('left', Can.width*0.3);
	        oImg.set('top', Can.height*0.3);
            Can.add(oImg);
        });
        });
        });
	}
    });

目的通り読み込んだ画像をクリックでcanvasへの描画はできましたが、forEachで回しているからだと思いますが、1個目の画像は1回、6個目の画像は6回分Can.add(oImg)されてしまいます。
querySelectorAllへのイベントなのでforEachを使っていますが、これが原因だと思いますが、解決策がわかりません。
すべて1回の描画に収めるのはどのようにすればよいでしょうか。