Html 在画布中添加动态文本框

我想实现一个功能，如果我点击画布，就会出现一个文本框。输入文本并单击“保存”按钮后，应将该文本保存在画布上。再次，如果我点击画布上的其他地方，它应该再次添加一个新的文本框。简而言之，我想在单击画布时添加一个新的文本框，并保存文本框值。

---

给我任何好的参考，我可以学习画布。为了实现指定的功能，我要求提供良好的教程。

您可以给出单击位置的画布坐标或id。还有一个变量将其设置为{0（如果文本框可用），因此必须保存。1（如果文本框不可用），则必须添加文本框}。交换它们并添加文本框或相应地保存它们

如果你有一个大的are，你必须找到点击或不点击，你可以添加为

$（“#canvasid”）。单击（函数（）{
var$this=$（this）；
如果（$this.data（'clicked'））{
var table=$（this）.closest（'sometablewhereiwanttextbox'）；
if（table.find（'input:text'）。长度<7）{
table.append（'Name'）；
}   
})；

共享一些代码