Javascript 在图像画布上绘制文本时，如何在键入时看到文本

我有一个画布设置，允许上传图像并在画布上显示，以便在单击sumbit按钮时抓取用户输入，在图像上绘制文本。我想看到图片上的文字，因为它是被键入的，而不是当我点击提交按钮

My index.html.erb

<canvas id="imageCanvas"></canvas>
<input type="file" id="imageLoader" name="imageLoader"/>
<input id="text" type="text" placeholder="your text" style="width: 300px; 
height: 28px; z-index: 0;"></input>
<button id="entertext">Submit</button>

---

您应该将此代码：

ctx.fillText($("#text").val(), 30, 40);

---

进入

$（“#text”）。在（“change”，function（）{…here…}）

处理程序。

它还没有工作。把它编辑成这样，当我打字时仍然看不到写在图像上的文字。我想这和钥匙有关（）；方法上一篇Stackoverflow文章展示了如何监听输入上的keyup事件，并重新绘制画布以反映更改：@markE不明白这一点，请帮助我。我知道在我的代码中有一个函数，它处理读取新文件的图像，加载时，会创建一个新的图像变量，加载时会将文本绘制到加载的图像中。教程将在新创建的画布中写入文本。还希望实现换行文本功能。您可以替换画布--只需引用#imageCanvas而不是#canvas。当用户在输入元素中键入新字符时：（1）使用

clearRect

擦除画布，（2）使用

drawImage

重新绘制图像，（3）使用链接代码中的

fillText

绘制当前文本。：-）

ctx.fillText($("#text").val(), 30, 40);