Javascript 如何将文本字段中的文本输入到html5画布

要查看我的问题，请单击此

当您想要添加文本时，文本字段变为可见。然后你键入一些东西，然后在画布上单击一两次，文本就可见了。当您更改为文本并再次单击时，另一个文本变为可见，而旧文本变为：（，这就是问题所在

说明：

我用这个工具，你可以画一些东西，然后把它擦掉。 例如，我的想法是在画布上添加文本。 因此，我在工具栏中添加了一个新工具：

<a href="#tools_sketch" data-tool="text">Text</a>

到目前为止，一切顺利

在sketch.js中，我编写了一个新工具“text”，它从textfield中获取值并将其添加到画布：

var text = document.getElementById("textfield_for_text_tool").value;
this.context.fillText(text, event.x, event.y);

有人知道我做错了什么吗

谢谢大家的阅读

编辑：我刚刚用示例和答案创建了另一个小提琴-现在的问题是，当我离开画布时，文本没有保存。

---

问题是我使用的sketch.js。如何在不使用sketch.js的情况下编写文本工具？

是的，这很有效。整个过程都很有效。请参见我的。问题是，当我输入新文本时，旧文本的文本会发生变化。我只能为多个文本提供一个内容：/下面是一张更好地描述问题的图片：

var text=e元素[i].value；this.context.fillText（text，event.x，event.y）；

-->重置内容&&

this.context.fillText（event.x，event.x，event.y）；

-->不重置内容

var text = document.getElementById("textfield_for_text_tool").value;
this.context.fillText(text, event.x, event.y);