複数枚重なったcanvasで透明領域のマウスイベントを見えている直下の要素に渡したい

お世話になっております。

Fabric.js で画像編集ツールを作成しようとしています。

背景を透過したpngファイルの塗りつぶし部分で写真画像をクリッピングし、マウスのクリックイベントで各クリップした画像を拡大、回転等編集したいのですが、透過pngファイル全体が選択範囲となってしまい最上部のレイヤーのみ編集可能な状態で困っています。

透過pngファイルの一部(透過していない部分)のみを選択可能とし透明部分は無いものとし下のcanvas に継承するにはどうしたら良いでしょうか。

クリッピング用の図形を座標指定で描く方法ですと、背景とマスクの位置合わせが困難ですので、
同一サイズの画像をクリッピングマスクにする仕様にしています。
canvasレイヤーは現在２層ですが、４層、５層と増やす形となります。

どなたかご教授いただければ幸いに存じます。

css
1	.canvas-container {
2		position: absolute;
3		left: 0;
4		top: 0;
5	}

html
1<canvas id="c" class="canvas" width="600" height="500" style="border:1px solid #ccc"></canvas>
2<canvas id="d" class="canvas" width="600" height="500" style="border:1px solid #ccc"></canvas>

javascript
1
2<script id="main">(function() {
3
4		
5var canvas = new fabric.Canvas('c');
6
7fabric.Image.fromURL('http://fabricjs.com/assets/2.svg', function(img){
8  img1 = img;
9  fabric.Image.fromURL('http://fabricjs.com/assets/pug.jpg', function(img){
10    img1.scaleToWidth(canvas.getWidth());
11	  img1.selectable = false; 
12    img2 = img;
13    img2.scaleToHeight(300);
14    img2.left = 50;
15    img2.top = 50;
16    img2.globalCompositeOperation = 'source-atop';
17    canvas.add(img1);
18    canvas.add(img2);
19  });
20});
21		
22
23var canvas2 = new fabric.Canvas('d');
24
25fabric.Image.fromURL('canvas/imgs/masque2.png', function(ly2){
26  img3 = ly2;
27  fabric.Image.fromURL('http://anessa.shiseido.co.jp/uploads/2018/02/howto_baby_main.jpg', function(ly2){
28    img3.scaleToWidth(300);
29	img3.selectable = false; 
30    img4 = ly2;
31    img4.scaleToHeight(300);
32    img4.left = 50;
33    img4.top = 50;
34    img4.globalCompositeOperation = 'source-atop';
35    canvas2.add(img3);
36    canvas2.add(img4);
37  });
38});	
39		
40
41		
42})();
43</script>