HTML5 Canvas Text Edit

Question

I have a text filled in HTML5 canvas using fillText(); How to make it editable and read the value into a variable? The text must be inside canvas, as it will

Answer 1

Take a look at Zebra. It's a set of widgets that render on an html canvas and one of the widgets is a text editor. Looks like it's free, open source, and in addition to providing links to their js files, they have a Git archive up on GitHub. http://www.zebkit.org/

Answer 2

Once the text is drawn to the canvas, it becomes pixels. The original text (and the polygon outline) will not be stored. You can't get it back from the canvas like you can't get it from jpg or png file.

If the canvas is drawn by your JavaScript, you can store the text in some other place. If not, you have to OCR it.

Answer 3

You can not get the text from the canvas. What you need to do is to keep the text in a variable before you use fillText(); and render the canvas. When you want to edit the text in the canvas, you have to paint the canvas again, and read the text from the variable again when you want to render the edited text with fillText();.