Search code examples
javascripthtmlhtml5-canvasjtextarea

Issue in placing textarea on canvas in javascript

I'm trying to place the textarea content into canvas but getting undefined message instead on the canvas block. successfully loaded image on it but not textarea. i tried in many ways to solve this but could not solve. please help me. Thanks in Advance.

html code

<textarea>praise the lord</textarea>
<div > <button class="wrapper1" id="saveid" onclick="sharee(0)">SAVE </button> </div>

<img id="scream" src="a.jpg" alt="The Scream" width="70" height="70"><p>Canvas:</p>

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

javascript code

function sharee() {  
var val = document.getElementById("myCanvas");

 var canvas = document.getElementById("myCanvas");
     var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
 textArea = document.getElementsByTagName("textarea")[0],

ctx.font="30px Arial";
ctx.drawImage(img, 40, 40);
ctx.fillText(textarea, 40,60);
setTimeout(function(){
   window.savephotoplugin(canvas,"image/png",device.version,function(val){ 
        //returns you the saved path in val 
        alert("Photo Saved: " + val);   
    });
 }, 0)
Solution

  • You are trying to draw the textarea element it self as text which won't work.

    Try this modification:

    ctx.fillText(textArea.value, 40, 60);

    and I'm not sure if this is just a typo in the post, but this line needs to be:

    var textArea = document.getElementsByTagName("textarea")[0]; //no comma at end