Javascript 如何将两个图像合并为一个？

我正在做的是将D3.js生成的图表（图表图例的HTML+图表正文的SVG）转换为图像，现在我使用html2canvas并手动将SVG转换为图像数据，原因是html2canvas只能处理SVG中的HTML部分和文本元素

所以我的问题是：

一旦我有了两个图像数据（svg部分类似于：

'data:image/svg+xml；base64，+btoa（svg）；

（我可以通过构建图像对象将其转换为类似的数据url，并将其绘制在画布上），html部分来自

画布，如何将它们合并到一起以获得完整图像

///////////////               ///////////////           ///////////////
/             /               ///////////////           /             /
/             /               ///////////////           /             /
/             /      +        ///////////////   =       /             /
///////////////               ///////////////           ///////////////
///////////////               /             /           /             /
///////////////               ///////////////           ///////////////

我猜canvas可能有能力（覆盖模式）合并多层，但我不知道怎么做。因此，任何代码示例都值得赞赏
 我认为您可以做的是将图像源写入画布，然后使用画布复合操作。这样，您可以使用最适合您需要的方法覆盖这两个图像

下面是一些使用
globalComposite操作的示例

 
 SVG是一种向量格式，你认为什么是合并？扑通一个图像到另一个图像上？@user2867288基本上是的。就像我说的，我有两张图片，一张是图表主体部分，另一张是图例部分，我想把它们放在一起，得到一张既有图表又有图例的图片。目前关于画布的问题是：[1]我不知道重叠层（如Photoshop层）[2]这两幅图像可能有一些相同的部分（如图表轴），但不在同一个位置（比较它们时相差10px，这听起来很可笑，但如果是真的话）。我需要删除底层的部分，只使用顶层。谢谢，当你发帖回复时，我正在读那篇帖子。我有点难以理解。林克死了：-(