Add dynamic textbox in canvas - html

Question

I want to achieve a functionality in which, if I click on the canvas, a textbox should appear. After entering the text and click save button, it should save that text on a canvas. Again if I click on canvas somewhere else, it should again add a new textbox. In short, I want to add a new text box on click of canvas and want to save the textbox value.
Give me any good reference where I can learn canvas. I am asking for good tutorial in order to achieve specified functionality.

Answer 1

You can give coordinates of canvas or id where you click. Also have a variable to set it as {0 if text box available, so have to save. 1 if text box not available so have to add text box}. Swap them and add text box or save them accordingly.
If you have a large are where you have to find clicked or not, you can add as
$("#canvasid").click(function(){
var $this = $(this);
if($this.data('clicked')) {
var table = $(this).closest('sometablewhereiwanttextbox');
if (table.find('input:text').length < 7) {
table.append('<tr><td style="width:200px;" align="right">Name <td> <input type="text" id="current Name" value="" /> </td></tr>');
}
});
Alter the code as needed.
Saving to DB depends on the technology you use. If its MVC or asp.net, then use AJAX calls to pass the data to back end and save them using web method.