如何让canvas镜像检测并传送到另一个canvas镜像？

// 创建源镜像和目标镜像的canvas元素
var sourceCanvas = document.createElement('canvas');
var targetCanvas = document.createElement('canvas');

// 设置canvas的宽高
sourceCanvas.width = targetCanvas.width = 400;
sourceCanvas.height = targetCanvas.height = 300;

// 获取源镜像canvas的上下文
var sourceCtx = sourceCanvas.getContext('2d');
// 获取目标镜像canvas的上下文
var targetCtx = targetCanvas.getContext('2d');

// 在源镜像canvas上绘制需要进行镜像检测的内容
sourceCtx.fillStyle = 'red';
sourceCtx.fillRect(0, 0, sourceCanvas.width, sourceCanvas.height);

// 获取源镜像canvas上的像素数据
var imageData = sourceCtx.getImageData(0, 0, sourceCanvas.width, sourceCanvas.height);
var pixels = imageData.data;

// 镜像检测算法处理像素数据
for (var i = 0; i < pixels.length; i += 4) {
  // 对每个像素进行镜像检测的处理
  // 示例：将红色通道的值设为0
  pixels[i] = 0;
}

// 将处理后的像素数据重新绘制到目标镜像canvas上
targetCtx.putImageData(imageData, 0, 0);

// 将目标镜像canvas添加到页面中显示
document.body.appendChild(targetCanvas);