Replace Text with Image by get user input in Javascript?

Question

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:

$('#draw').click(function() {
 var text = document.getElementById('txtBallon').value;
 var $ballon = $('#ballon'),
 $canvas = $('#canvas');
 var ballon_x = $ballon.offset().left - $canvas.offset().left,
 ballon_y = $ballon.offset().top - $canvas.offset().top;
 context.drawImage(ballon, ballon_x, ballon_y);
 $ballon.hide();
 $(this).attr('disabled', 'disabled');
 });

JSFiddle

• ketan: What actually want. You want to replace text written textinput in place of balloon when draw click?

Answer 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

• Venkadesh S: thanks a lot. please could you make that text draggable ?
• ketan: draggable after draw?
• Venkadesh S: no before draw, to do that text should reflect simultaneously when i type in input box, then drag it and draw.
• ketan: @VenkadeshS Check this. jsfiddle.net/V92Gn/3884. type in text. beside that label you can drag anywhere and click on draw. You can make changes as per your requirement.
• Venkadesh S: yeah. draw is not working. but this is for your reference to complete it: jsfiddle.net/vengreat/7r2007nn/2

Answer 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

• Venkadesh S: Hi., you are merely come to answer. But My expectation is "text should reflect simultaneously when i type in input box, then drag it and draw finally".
• Ahs N: @VenkadeshS You mean you should be able to type the text, then drag it, then click draw to fix it on the canvas? Or did I misunderstand?
• Ahs N: I updated my answer. The checkbox is at the bottom :)
• Ahs N: The initial position is defined by the CSS class .drag :)
• Ahs N: Here it is......just moved the JS to the bottom as I suggested before