如何在FabricJS中将鼠标事件传递到下部画布

Question

请帮助我解决此问题。

我有2布。大小相同且重叠的画布，其名称分别为“ editorCanvas-above”和“ ditorCanvas-above”。

我的问题是，当鼠标不在画布的clipPath上方的矩形内时，如何将鼠标事件传递给较低的画布。因此，用户可以选择下面的画布中的对象并与之交互。

谢谢！

var canvasWidth = $(".editor-area").width();
var canvasHeight = $(".editor-area").height();

// set canvas equal size with div
var belowObject = document.getElementById("editorCanvas-below");
$(belowObject).width(canvasWidth);
$(belowObject).height(canvasHeight);

belowCanvas = new fabric.Canvas('editorCanvas-below', {
    backgroundColor: 'white',
    selectionLineWidth: 2,
    width: canvasWidth,
		height: canvasHeight
});

var clipPath = new fabric.Rect({ left: 50, top: 10, width: 400, height: 50 });
belowCanvas.clipPath = clipPath;

 var textBelow = new fabric.Text('Below Object', { left: 50, top: 10 });
belowCanvas.add(textBelow);

// setup above canvas
var aboveObject = document.getElementById("editorCanvas-above");
$(aboveObject).width(canvasWidth);
$(aboveObject).height(canvasHeight);

aboveCanvas = new fabric.Canvas('editorCanvas-above', {
    backgroundColor: 'green',
    selectionLineWidth: 2,
    width: canvasWidth,
		height: canvasHeight
});

var clipPath2 = new fabric.Rect({ left: 50, top: 100, width: 400, height: 50 });
aboveCanvas.clipPath = clipPath2;

 var textAbove = new fabric.Text('Above Object', { left: 50, top: 100 });
aboveCanvas.add(textAbove);

.editor-area {
  position: relative;
    width: 100%;
    height: 100vh;
    background-color: gray;
}

.canvasContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: transparent;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.js"></script>


<div class="editor-area">
  <div id="canvasContainer">
    <canvas id="editorCanvas-below"></canvas>
  </div>
  
  <div class="canvasContainer">
    <canvas id="editorCanvas-above"></canvas>
  </div>
  
</div>