javascript - 对于 html 画布，如何创建两个上下文然后将两者合成？

Question

使用 html 画布，我想要有两个上下文变量，ctx1 和 ctx2，然后将两者合成到最终的上下文中。

目前我认为可以使用两个画布元素。但我不知道任何确切的技术，或者是否存在更简单的技术。请帮助我实现我的目标。

作为补充，我的真正目标不是拥有 2 个上下文，而是合成我分别绘制的 2 个图像数据。

let ctx1;
let ctx2;
let canvas1 = document.getElementById('canvas1');
if (canvas.getContext) {
  ctx1 = canvas.getContext('2d');
ctx1.fillRect(0,0,100,100);
}
let canvas2 = document.getElementById('canvas2');
if (canvas.getContext) {
  ctx2 = canvas.getContext('2d');
ctx2.fillRect(50,50,100,100);
}

// Here I want to composite ctx1 and ctx2.

标签： javascripthtmlcanvas