Replace Text With Image By Get User Input In Javascript?

I have to modify this program to replace image with text. In this program, the value of input box should reflect in the place of balloon image. Could you help me ? Program link: $

Solution 1:

You can do like following way:

context.font = "30px Verdana";
context.fillText(text,ballon_x,ballon_y);

Instead of context.drawImage(ballon, ballon_x, ballon_y);

Working Fiddle

Updated Fiddle with text drag

Solution 2:

This is how I would do it:

$(document).ready(function() {
  var d_canvas = document.getElementById('canvas');
  var context = d_canvas.getContext('2d');
  var background = document.getElementById('background');
  context.drawImage(background, 0, 0);

  $('.drag').draggable();

  $('#draw').click(function() {
      var $canvas = $('#canvas');

var textX = $('#myText').offset().left - $canvas.offset().left;
var textY = $('#myText').offset().top - $canvas.offset().top + 12;
        context.font= "13px Arial";
        context.fillText($("#myText").text(),textX,textY);

        $('#myText').hide();
    $(this).attr('disabled', 'disabled');
  });
});

$("#theText").keyup(function(){
    $("#myText").text($(this).val());
});

Here is the updated JSFiddle demo