html - JavaScriptHTML5 - Fetch Canvas Object Text? - Stack Overflow

admin管理员组

文章数量:1355123

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.

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.

• javascript
• html
• dom
• canvas

Share Improve this question Follow asked Feb 8, 2013 at 6:39 nomaamnomaam 1,27333 gold badges2323 silver badges4040 bronze badges 3

• 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/en-US/docs/DOM/element.addEventListener – 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 Commented Feb 8, 2013 at 21:43
• Check my answer below. stackoverflow./a/14786105/427902 – redGREENblue Commented Feb 9, 2013 at 7:58

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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);

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.

See http://jsfiddle/ws5aK/

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

本文标签： htmlJavaScriptHTML5Fetch Canvas Object TextStack Overflow