合并多个先前绘制的画布

Question

在我目前的代码中，我有不同的功能来绘制不同的画布，这些功能完美无缺。一旦图像完成，draw函数将被调用多次并存储稍后要调用的结果。

我无法将两个图像合并在一起。我可以通过调用＆＃39; testbor1.url＆＃39;在mergeCanvas（）中单独重绘它们。但是当我尝试将它们绘制到新画布上时，结果是空白的。

有谁能告诉我为什么我不能把它们画在一块画布上？

以下：How can I put multiple canvas elements in to one canvas element?

function draw()
{
    var can3 = document.getElementById('RugCanvas3');
    can3.offset = 0;
    can3.width = namespacetest.getCanvasWidth();
    can3.height = namespacetest.getCanvasHeight();

    var ctx3 = can3.getContext('2d');
    ctx3.drawImage(drawBorder(70,size,img, borderwidth), 0, 0);    
    ctx3.drawImage(drawOverlay(borderwidth, 70), 0, 0);  

    var img = new Image();
    img.src = can3.toDataURL("image/png");
    namespacetest.dataURLs['img1'] = img.src;
}

namespacetest.mergeCanvas = function()
{

   var testbor1 = new Image();
   var testbor2 = new Image();
   testbor1.src = namespacetest.dataURLs['img1'];
   testbor2.src = namespacetest.dataURLs['img2'];

   var bor = document.getElementById('Canvas5');
   var ctx = bor.getContext("2d");
   ctx.drawImage(testbor1, 0, 0, 400, 400);
   ctx.drawImage(testbor2, 0, 0, 400, 400);

   var buffer_img = new Image();
   buffer_img.src = bor.toDataURL("image/png");

   var output = document.getElementById('RugCanvas6');
   output.innerHTML = '<img src="' + buffer_img.src + '" alt="Canvas Image" />';

}