Javascript 在画布上仅绘制来自其他两个画布的重叠像素

我有两张相同的画布，我用鼠标在上面画，还有第三张（仍然是相同的宽度和高度），我想在上面通过只显示重叠像素来“组合”另外两张，这意味着那些与最初两张画布的坐标相同的像素

比如：

const left = document.querySelector('#canvasLeft');
const right = document.querySelector('#canvasRight');
const combined = document.querySelector('#canvasCombined');
        
const draw = () => {
   // do drawing on each canvas...
    
   // get image data from the canvasses...
   const imageDataRight = right.ctx.getImageData(0, 0, right.canvas.width, right.canvas.height);
   const imageDataLeft = left.ctx.getImageData(0, 0, left.canvas.width, left.canvas.height);
    
   // do something with the image data picking only the matching pixels from each canvas --> PLEASE HELP!       
   combined.ctx.putImageData(imageDataCombined, 0, 0);
        
}

更新：下面的图片更好地解释了我想要实现的目标

---

我相信您想要的是与XOR复合模式相反的模式。在“正常”合成模式下，通过将2张画布绘制成第3张画布，您应该可以获得所需的结果。然后在异或模式下再次绘制

let canvas1=document.getElementById（“canvas1”）；
让canvas2=document.getElementById（“canvas2”）；
让canvas3=document.getElementById（“canvas3”）；
设c1=canvas1.getContext（“2d”）；
让c2=canvas2.getContext（“2d”）；
设c3=canvas3.getContext（“2d”）；
//拉票
c1.fillStyle=“#000000”；
c1.beginPath（）；
c1.fillRect（0,0,60,60）；
c1.笔划（）；
//拉票
c2.fillStyle=“#000000”；
c2.beginPath（）；
c2.fillRect（40,40,60,60）；
c2.笔划（）；
//将复合模式重置为默认模式
c3.globalCompositeOperation='source over'；
//把1和2画成3
c3.绘图图像（canvas1,0,0）；
c3.绘图图像（canvas2，0，0）；
//打开异或
c3.globalCompositeOperation='xor'；
//把1和2再画成3
c3.绘图图像（canvas1,0,0）；
c3.绘图图像（canvas2，0，0）
画布{
边框：1px纯红；
}

你的意思是这样的：？@Johnnymapp不太可能。我已经可以在两幅画布上画画，并在第三幅中展示这两幅画。我想在第三个图中展示的是2的组合，但仅当绘制的像素位于同一位置时。查看更新的问题和图片