Javascript 带图像克隆问题的HTML画布

我使用来自的提示+代码尝试克隆我的原始画布-它包含一个覆盖有文本的图像。然而，每次我运行它时，图像和文本都不会被复制，尽管原始作品很好。下面是javascript：

函数CardText（）{
var title=document.calform.titleText.value；
var badge=document.calform.badge.value；
var include=document.calform.include.value；
var description=document.calform.description.value；
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var x=画布宽度/2；
变量y=画布高度/2；
var imageObj=新图像（）；
imageObj.onload=函数（）{
drawImage（imageObj，0,0）；
context.font=“25pt Helvetica”；
context.fillStyle=“白色”；
context.textAlign=“中心”；
上下文。填充文本（标题，x，76）；
context.font=“18pt Arial”；
context.fillStyle=“白色”；
context.textAlign=“中心”；
背景。填充文本（徽章，x-10311）；
context.font=“18pt Arial”；
context.fillStyle=“黑色”；
context.textAlign=“中心”；
上下文。填充文本（鼓励，x，380）；
context.font=“12pt Arial”；
context.fillStyle=“黑色”；
wrapText（上下文、描述、x、440、280、18）；
};
imageObj.src=https://i.imgur.com/7wqLgSd.jpg';
}
功能cloneCanvas（旧画布）{
//创建一个新画布
var newCanvas=document.createElement（'canvas'）；
var context=newCanvas.getContext（'2d'）；
//设置尺寸
newCanvas.width=oldCanvas.width；
newCanvas.height=oldCanvas.height；
//将旧画布应用于新画布
drawImage（oldCanvas，100300）；
//返回新画布
返回新画布；
}

在

CardText

有机会完全加载图像并在图像上绘制文本之前，您可能正在调用

cloneCanvas

在尝试

cloneCanvas

之前，尝试完全加载图像+文本的重构

示例代码和演示：

var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var imageObj=新图像（）；
imageObj.onload=函数（）{
//创建原始卡片画布
//在图像加载之后
CardText（）；
//接下来克隆原始卡片画布
//新画布
var myNewCanvas=cloneCanvas（canvas）；
document.body.appendChild（myNewCanvas）；
};
imageObj.src=https://i.imgur.com/7wqLgSd.jpg';
函数CardText（）{
var title=“title”//document.calform.titleText.value；
var badge=“badge”；//document.calform.badge.value；
var include=“include”//document.calform.include.value；
var description=“description”//document.calform.description.value；
var x=画布宽度/2；
变量y=画布高度/2；
drawImage（imageObj，0,0）；
context.font=“25pt Helvetica”；
context.fillStyle=“白色”；
context.textAlign=“中心”；
上下文。填充文本（标题，x，76）；
context.font=“18pt Arial”；
context.fillStyle=“白色”；
context.textAlign=“中心”；
背景。填充文本（徽章，x-10311）；
context.font=“18pt Arial”；
context.fillStyle=“黑色”；
context.textAlign=“中心”；
上下文。填充文本（鼓励，x，380）；
context.font=“12pt Arial”；
context.fillStyle=“黑色”；
context.fillText（description，x440）；
//wrapText（上下文、描述、x、440、280、18）；
}
功能cloneCanvas（旧画布）{
//创建一个新画布
var newCanvas=document.createElement（'canvas'）；
var context=newCanvas.getContext（'2d'）；
//设置尺寸
newCanvas.width=oldCanvas.width；
newCanvas.height=oldCanvas.height；
//将旧画布应用于新画布
drawImage（oldCanvas，100300）；
//返回新画布
返回新画布；
}

body{背景色：象牙色；填充：10px；}
画布{边框：1px纯红；}

---

非常感谢您的帮助，我非常感谢。然而，不知怎么的，它对我不起作用。我可以清楚地看到这个片段工作得很好，所以它增加了我的困惑。也许添加完整的HTML文档会说明我显然弄错了什么。再次感谢。我在回答中添加了将代码插入html的内容。祝你的项目好运！太棒了，谢谢你！我没有足够的代表投票给你，对此我很抱歉：(