how to add text area on canvas using kinetic.js but only from js file

Question

how to add text area on canvas using kinetic.js but only using from js file. I tried all the solutions provided on this forum and elsewhere but not getting any solution. i tried to create text-area in js file itself but it is not appending on canvas. i tried to make canvas position:absolute or relative also but didnt work.

in short i am trying to create text area or sticky note on canvas which will i use on fly to create source code at background. so please suggest me hot to create comment area on canvas.

this is my code:

var stage = new Kinetic.Stage({
      container: 'container',
      width: 578,
      height: 500,
      x: 10,
      y:18
    });



    var box = new Kinetic.Rect({
        x : relativeX,
        y : relativeY,
        offset : [ 50, 25 ],
        width : 100,
        height : 50,
        fill : 'yellow',
        stroke : 'black',
        strokeWidth : 1,
        name:'comment',
              id:'comment'                                  
    });

     var simpleText = new Kinetic.Text({
            x : relativeX - 48,
            y : relativeY - 30,
            text : 'Note',
            fontSize : 15,
            fontFamily : 'Calibri',
            fill : 'green',
            id:"textBox"                           
        });

    group.add(box);     
    group.add(simpleText);                       
    layer.add(group);                           
    layer.draw();

group.on('dblclick', function() {                   
simpleText.setText(prompt('New Text 2:'));  
layer.draw();
    });  

Thanks in Advance

Answer 1

hay i have done this using following way but i am not able to resize it as normal textarea works in jquery...

 var canvas = document.getElementById('canDemo');
                      ctx = canvas.getContext('2d'),
                      font = '14px sans-serif',
                      hasInput = false;
                      canvas.onclick = function(e) {                     
                      if (hasInput) return;
                      addInput(e.clientX, e.clientY);             
                    };

                  function addInput(x, y) {                       
                      var input = document.createElement('textarea');       
                      input.id="comment_area";
                      input.type = 'textarea';
                      input.style.position = "absolute";

                      input.style.left = (x - 4) + 'px';
                      input.style.top = (y - 4) + 'px';
                      input.style.zIndex="3"; 
                      input.onkeydown = handleEnter;                          
                      document.body.appendChild(input);

                      input.focus();

                      hasInput = true;
                  }

                  function handleEnter(e) {
                      var keyCode = e.keyCode;
                      if (keyCode === 13) {     
                          alert($("#comment_area").val());

                        //  simpleText.setText( $("#comment_area").val());
                          drawText(this.value, parseInt(this.style.left, 10), parseInt(this.style.top, 10));

                          document.body.removeChild(this);
                          hasInput = false;
                      }
                  }

                  function drawText(txt, x, y) {
                      ctx.textBaseline = 'top';
                      ctx.textAlign = 'left';
                      ctx.font = font;
                      ctx.fillText(txt, x - 4, y - 4);
                  }