在javascript错误中在图像上打印文本

我正在用javascript创建一个html部分，以便在图像上打印文本。当用户在输入框中输入文本时，文本将打印在图像上，用户可以下载该图像。为了实现这一点，我尝试了以下代码

var text\u title=“Heading”；
var text_title1=“标题”；
var imageLoader=document.getElementById（'imageLoader'）；
imageLoader.addEventListener（'change'，handleImage，false）；
var canvas=document.getElementById（'imageCanvas'）；
var ctx=canvas.getContext（'2d'）；
var img=新图像（）；
img.crossOrigin=“匿名”；
window.addEventListener（'load'，DrawPlaceholder）
函数DrawPlaceholder（）{
img.onload=函数（）{
绘图覆盖（img）；
DrawText（）；
动态文本（img）
};
img.src=https://unsplash.it/400/400/?random';
}
功能绘图覆盖（img）{
ctx.drawImage（img，0,0）；
ctx.fillStyle='rgba（30144255,0.4）'；
ctx.fillRect（0，0，canvas.width，canvas.height）；
}
函数DrawText（）{
ctx.fillStyle=“白色”；
ctx.textb基线='中间'；
ctx.font=“50px‘蒙特塞拉特’”；
ctx.fillText（文本标题，50,50）；
ctx.fillText（文本标题1、150、150）；
}
函数动态文本（img）{
document.getElementById（'name'）。addEventListener（'keyup'，function（）{
clearRect（0，0，canvas.width，canvas.height）；
绘图覆盖（img）；
DrawText（）；
text_title=this.value；
ctx.fillText（文本标题，50,50）；
});
document.getElementById（'name1'）。addEventListener（'keyup'，function（）{
clearRect（0，0，canvas.width，canvas.height）；
绘图覆盖（img）；
DrawText（）；
text_title=this.value；
ctx.fillText（文本标题1、150、150）；
});
}
函数handleImage（e）{
var reader=new FileReader（）；
var img=“”；
var src=“”；
reader.onload=函数（事件）{
img=新图像（）；
img.onload=函数（）{
canvas.width=img.width；
canvas.height=img.height；
ctx.drawImage（img，0,0）；
}
img.src=event.target.result；
src=event.target.result；
canvas.classList.add（“show”）；
绘图覆盖（img）；
DrawText（）；
动态文本；
}
reader.readAsDataURL（e.target.files[0]）；
}
函数convertToImage（）{
open（canvas.toDataURL（'png'）；
}
document.getElementById（'download'）。onclick=函数下载（）{
convertToImage（）；
}

。换页{
显示：内联块；
利润率：2米自动；
}
.控制{
&__输入{
显示：块；
保证金：0自动；
背景：无；
边界：无；
字号：1em；
垫底：5em；
边框底部：2个实心#ccc；
文本对齐：居中；
大纲：无；
颜色：#fff；
}
&__btn{
背景：道奇蓝；
颜色：#fff；
边界：无；
字号：1em；
}
&__标签{
显示：块；
字体大小：.8em；
填料顶部：.3em；
边缘底部：2米；
}
}
帆布{
背景色：#eee；
//不透明度：0；
过渡：不透明度；
&.表演{
不透明度：1；
}
}
.帆布包装{
边缘顶部：50px；
位置：相对位置；
}
#画布{
z指数：9999；
}

首先，选择一个图像。
覆盖文本
文本

您的代码中有输入错误；其他一切都一样

document.getElementById('name1').addEventListener('keyup', function() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      DrawOverlay(img);
      DrawText();
      // text_title = this.value; incorrect variable
      text_title1 = this.value;
      ctx.fillText(text_title1, 150, 150);
    });

.换页{
显示：内联块；
利润率：2米自动；
}
.控制{
&__输入{
显示：块；
保证金：0自动；
背景：无；
边界：无；
字号：1em；
垫底：5em；
边框底部：2个实心#ccc；
文本对齐：居中；
大纲：无；
颜色：#fff；
}
&__btn{
背景：道奇蓝；
颜色：#fff；
边界：无；
字号：1em；
}
&__标签{
显示：块；
字体大小：.8em；
填料顶部：.3em；
边缘底部：2米；
}
}
帆布{
背景色：#eee；
//不透明度：0；
过渡：不透明度；
&.表演{
不透明度：1；
}
}
.帆布包装{
边缘顶部：50px；
位置：相对位置；
}
#画布{
z指数：9999；
}
首先，选择一个图像。
覆盖文本
文本
var text_title=“Heading”；
var text_title1=“标题”；
var imageLoader=document.getElementById（'imageLoader'）；
imageLoader.addEventListener（'change'，handleImage，false）；
var canvas=document.getElementById（'imageCanvas'）；
var ctx=canvas.getContext（'2d'）；
var img=新图像（）；
img.crossOrigin=“匿名”；
window.addEventListener（'load'，DrawPlaceholder）
函数DrawPlaceholder（）{
img.onload=函数（）{
绘图覆盖（img）；
DrawText（）；
动态文本（img）
};
img.src=https://unsplash.it/400/400/?random';
}
功能绘图覆盖（img）{
ctx.drawImage（img，0,0）；
ctx.fillStyle='rgba（30144255,0.4）'；
ctx.fillRect（0，0，canvas.width，canvas.height）；
}
函数DrawText（）{
ctx.fillStyle=“白色”；
ctx.textb基线='中间'；
ctx.font=“50px‘蒙特塞拉特’”；
ctx.fillText（文本标题，50,50）；
ctx.fillText（文本标题1、150、150）；
}
函数动态文本（img）{
document.getElementById（'name'）。addEventListener（'keyup'，function（）{
clearRect（0，0，canvas.width，canvas.height）；
绘图覆盖（img）；
DrawText（）；
text_title=this.value；
ctx.fillText（文本标题，50,50）；
});
document.getElementById（'name1'）。addEventListener（'keyup'，function（）{
clearRect（0，0，canvas.width，canvas.height）；
绘图覆盖（img）；
DrawText（）；
text_title1=此值；
ctx.fillText（文本标题1、150、150）；
});
}
函数handleImage（e）{
var reader=new FileReader（）；
var img=“”；