JavaScript / HTML5 - Fetch Canvas Object Text?

Question

I am working with javascript / html and trying to fetch the text from a canvas object which is already created on the page.

I would like to click a button after the page is already loaded and see the text from the canvas object. Here is the code I am trying.

var CheckCanvas = document.getElementById(className);
var CheckContext = CheckCanvas.getContext('2d');

alert( 'btn text: ' + CheckContext.Text );

I have also tried fetching the 'fillText' property but I am unable to get the text from the object.

Any help would be much appreciated. I'm sure it's simple, but I could not find a solution.

Thanks.

What exactly do you mean by "text from a canvas object". If you mean a text drawn on the canvas, then you need to add events listener to canvas and objects drawn on it. Go through this for details developer.mozilla.org/en-US/docs/DOM/element.addEventListener — redGREENblue
– redGREENblue, Commented Feb 8, 2013 at 7:05
When you create and draw a canvas object with text the filltext option is used. I would like to later fetch the canvas object and fetch the filltext text. — nomaam
– nomaam, Commented Feb 8, 2013 at 21:43

TryingToImprove · Accepted Answer · 2013-02-08 07:30:19Z

4

You wont be able to get the text from a canvas object because it is a image.. You can however store the text in a variable before it have been drawed, and then output it later.

var text = "Hello";

conxtext.fillText(text, 100, 100);

alert("value: " + text);

answered Feb 8, 2013 at 7:30

TryingToImprove

7,4555 gold badges32 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nomaam Over a year ago

The only problem being that I have huge amounts of objects and they have dynamic text.

Grace Huang Over a year ago

That way, you can keep track of the dynamic text using variables, instead of querying from the canvas.

TryingToImprove Over a year ago

It will not be possible to get the text of a image/canvas.. Have you ever seen a feature where you can select text from a image? I don't think your huge amounths of objects would kill the app.. Objects you don't use can be deleted, so it do not use memory...

redGREENblue · Accepted Answer · 2013-02-09 07:55:59Z

Okay. First of all, there is no way to do it using currently available canvas methods (or I am not aware of it). One way to do is to write your own class but that's a whole lot of work. I will suggest that you use a canvas library like kineticjs or fabricjs which will make it very easy to implement such function. Here's an example of how you can do it using fabricjs.

<canvas id="canvas1"></canvas>
<button id="addtext">Add Text </button>
<button id="retText">Retrive Text </button>

var canvas = new fabric.Canvas('canvas1');

document.getElementById('addtext').onclick = function() {
    var textVar = new fabric.Text("Hello World!");
    textVar.left=100;
    textVar.top=100;
    canvas.add(textVar);

  };
document.getElementById('retText').onclick = function() {
     var activeObject = canvas.getActiveObject();
      if (activeObject && activeObject.type === 'text') {
        alert(activeObject.text);
      }
    else
    {
        alert ("No object selected or Selected object not text");
    }
  };

jsFiddle here.

Grace Huang · Accepted Answer · 2013-02-08 07:01:18Z

-1

See http://jsfiddle.net/ws5aK/

CheckContext.fillText works, but there is no such property called Text.

answered Feb 8, 2013 at 7:01

Grace Huang

5,7575 gold badges36 silver badges55 bronze badges

Collectives™ on Stack Overflow

JavaScript / HTML5 - Fetch Canvas Object Text?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related