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 be written inside some complex polygon shape.

Solution 1

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();.

Solution 2

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/