Javascript 无法使用现有画布元素添加新画布元素

我使用2个画布元素。我使用一个元素作为主画布元素，其中包含所有元素。我正在一个单独的画布中生成条形码，并希望将其添加到主画布中。尝试了很长时间。在这里添加一个示例

我正在使用facric.js和JsBarcode。提前谢谢你的帮助。如果有其他更好的方法，请建议

您可以使用条形码画布数据并将其作为url传递

演示

$document.readyfunction{ JsBarcode'barcode'，1234{ 宽度：4， 高度：20//displayValue:false }; var canvas=new fabric.CanvaslabelDesigner； var bc=document.getElementByIdbarcode； fabric.Image.fromURLbc.toDataURL，functionimg{ img.set{ 左:0,， 排名：0 } canvas.addimg； } }; canvas[id^=c]，div[id=output]{ 边框：1px纯红； } canvas[id=buffer]{ 边框：1px点绿色； } 输出{ 填充：15px； } 输出img{ 边框：1px点蓝色； } 函数可以将另一个画布作为参数，因此不必转换为中间的图像。但是，它始终需要x和y坐标作为第二个和第三个参数

您还交换了c和canvas变量：

$(document).ready(function() {
 JsBarcode('#barcode', "1234", {
    width: 4,
    height: 20//displayValue: false
  });
  var bc = document.getElementById("barcode");
  var c = document.getElementById("labelDesigner");
  var context = c.getContext("2d");

  context.drawImage(bc, 0, 0);
});

---

谢谢这也是我期待的。令人惊叹的

$(document).ready(function() {
 JsBarcode('#barcode', "1234", {
    width: 4,
    height: 20//displayValue: false
  });
  var bc = document.getElementById("barcode");
  var c = document.getElementById("labelDesigner");
  var context = c.getContext("2d");

  context.drawImage(bc, 0, 0);
});