4

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.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Srini
  • 49
  • 1
  • 1
  • 2
  • 1
    You can use a library like [fabric.js](http://kangax.github.com/fabric.js/demos/kitchensink/index.html) which gives you ability to create text objects, edit them in real time, delete, clone, move, rotate, scale them, and so on... Click "add text" on a demo page, then select it and edit in a textarea below canvas. There are also various options for text presentation, such as making it underlined, stroke-through or with shadow. – kangax Jul 26 '11 at 18:18
  • @kangax Any examples of editing text objects in real-time using Fabric.js? The kitchensink demo can add text, after which it can be scaled and rotated at will — but is there an easy way to edit the text contents? – Mathias Bynens Jun 26 '12 at 08:50
  • 1
    @MathiasBynens In kitchensink you could edit text in a standalone textarea and it's immediately reflected on canvas (it's under canvas). We use the same approach on [printio.ru](http://printio.ru/tees/new), and I've seen few variations of this idea in other places (e.g. on [easel.ly](http://www.easel.ly/), where they position textarea right next to the text you're editing). – kangax Jun 26 '12 at 10:08
  • fixed link: http://fabricjs.com/kitchensink/ – gbjbaanb Aug 31 '12 at 22:02

3 Answers3

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

Jonas
  • 121,568
  • 97
  • 310
  • 388
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/

froggythefrog
  • 512
  • 1
  • 4
  • 16
0

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.

Cat Chen
  • 2,387
  • 17
  • 12