title: using canvas kinetic in html5 to draw many text and edit them
body: <p>When I click the text on a card, I want to be able to edit the text like this website: </p>
  
  <p><a href="http://www.vistaprint.com/vp/ns/studio3.aspx?pf_id=064&amp;combo_id=120585&amp;free_studio_gallery=true&amp;referer=http%3a%2f%2fwww.vistaprint.com%2fvp%2fns%2fdefault.aspx%3fdr%3d1%26rd%3d1%26GNF%3d0%26GP%3d5%252f19%252f2012%2b12%253a36%253a37%2bAM%26GPS%3d2448654652%26GNF%3d1%26GPLSID%3d&amp;rd=1" rel="nofollow">http://www.vistaprint.com/vp/ns/studio3.aspx?pf_id=064&amp;combo_id=120585&amp;free_studio_gallery=true&amp;referer=http%3a%2f%2fwww.vistaprint.com%2fvp%2fns%2fdefault.aspx%3fdr%3d1%26rd%3d1%26GNF%3d0%26GP%3d5%252f19%252f2012%2b12%253a36%253a37%2bAM%26GPS%3d2448654652%26GNF%3d1%26GPLSID%3d&amp;rd=1</a></p>
  
  <p>Here is my code: </p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function () {
  
      var Total_layers = 0;
  
      var Text = {};
      /*set up stage for drawing image*/
      var stage = new Kinetic.Stage({
          container: "container",
          width: 600,
          height: 400
      });
      // var Layer = {};
      /*create a layer object for placing text image over it and place it over the stage*/
      var layer = new Kinetic.Layer();
      //Layer[Total_layers]
      /*Text Property*/
      var New_Text = "Company Name";
      var Text_Font = "Arial";
      var Text_Color = "Black";
  
      var Text_Size = "30";
      var Text_Pos_X = 200;
      var Text_Pos_y = 100;
      var Selected_Text = new Kinetic.Text({});
      var current_layer = 0;
      // var text_selected = 1;
  
      /*Add event for them*/
      //var formElement = document.getElementById("New Text");
  
      // formElement.addEventListener('change', Text_Changed, false);
  
      var formElement = document.getElementById("selectFontSize");
      formElement.addEventListener('change', Text_Size_Changed, false);
      /*This Function will be Executed when the Size of the Text in consideration is changed*/
      function Text_Size_Changed(e) {
          var target = e.target;
          Text_Size = target.value;
          Text_Pos_X = 200; //Text[Total_layers].x;
          Text_Pos_Y = 100; //Text[Total_layers].y;
          //DeleteLayer(Total_layers);
          layer.remove(Selected_Text);
          Draw_text(Total_layers);
      }
  
      /*Function to swap the Kinetic Text object and get the selected Text object to The Top*/
      function swap_layers(Selected_text) {
  
          var temp = new Kinetic.Text({});
  
          for (var i = 1; i &lt;= Total_layers; i++) {
  
              if (Text[i] == Selected_text) {
  
                  temp = Text[i];
                  Text[i] = Text[Total_layers];
                  Text[Total_layers] = temp;
                  break;
              }
          }
      }
  
      /*Add different Events to the Text objects once They are instantiated*/
  
      function add_events(dest_Text) {
  
          dest_Text.on("mouseover", function () {
              document.body.style.cursor = "pointer";
          });
          dest_Text.on("mouseout", function () {
              document.body.style.cursor = "default";
          });
          dest_Text.on("click", function () {
  
              $("#selectFontSize").change(function () {
                  dest_Text.setFontSize($("#selectFontSize").val());
                  layer.draw(); // vì gọi layer.draw nên tất cả text trong layer đó đều dc vẽ lại 
              });
              $("#selectFontFamily").change(function () {
                  swap_layers(dest_Text);
                  //dest_Text.setFontFamily($("#selectFontFamily").val());
  
                  //layer.draw();
              });
  
          });
  
      }
  
      /*Draw the Text over the layer depening upon the Text_object_Number*/
      function Draw_text(Text_object_Number) {
  
          /*Set the Properties of the Topmost object that is been modified and which will be added to the layer*/
          Text[Text_object_Number] = new Kinetic.Text({
  
              x: Text_Pos_X,
              y: Text_Pos_Y,
              text: New_Text,
              fontSize: Text_Size,
              fontFamily: Text_Font,
              textFill: Text_Color,
              align: "center",
              verticalAlign: "middle",
              draggable: "true"
  
          });
  
          /*Adds all the Text objects onto the layer and adds the events to every Text object */
          //for (var i = 1; i &lt;= Text_object_Number; i++) {
          layer.add(Text[Text_object_Number]);
          add_events(Text[Text_object_Number]);
          //}
          stage.add(layer);
      }
      $("#add_text").click(function () {
          Total_layers++;
          Text[Total_layers] = new Kinetic.Text({
              x: Text_Pos_X,
              y: Text_Pos_y,
              text: New_Text,
              fontSize: 30,
              fontFamily: Text_Font,
              textFill: Text_Color,
              align: "center",
              verticalAlign: "middle",
              draggable: "true"
          });
          add_events(Text[Total_layers]);
          layer.add(Text[Total_layers]);
          stage.add(layer);
      });
  
      /*Adding an image to the present Context*/
      var imageObj = new Image();
      //alert("abc");
      imageObj.onload = function () {
          var T_shirt = new Kinetic.Image({
              x: 60,
              y: 0,
              image: imageObj,
              width: 550,
              height: 400,
              name: "image"
          });
  
          layer.add(T_shirt);
          stage.add(layer);
      }
      imageObj.src = "../../Content/Image/imagepreview1.jpg";
  });
  </code></pre>
  
  <p>I have tried many ways, but I still can't resolve this problem. </p>
  
  <p>How can I do this by using canvas kineticjs in html5?</p>