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

What actually want. You want to replace text written textinput in place of balloon when draw click? — ketan
– ketan, Commented Jan 6, 2016 at 6:09

ketan · Accepted Answer · 2016-01-06 06:48:09Z

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

edited Jan 6, 2016 at 6:48

answered Jan 6, 2016 at 6:22

ketan

19.4k42 gold badges68 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

Venkadesh S Over a year ago

thanks a lot. please could you make that text draggable ?

ketan Over a year ago

draggable after draw?

Venkadesh S Over a year ago

no before draw, to do that text should reflect simultaneously when i type in input box, then drag it and draw.

ketan Over a year ago

@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 Over a year ago

yeah. draw is not working. but this is for your reference to complete it: jsfiddle.net/vengreat/7r2007nn/2

|

Ahs N · Accepted Answer · 2016-01-06 07:21:54Z

1

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

edited Jan 6, 2016 at 7:21

answered Jan 6, 2016 at 6:36

Ahs N

8,3961 gold badge30 silver badges34 bronze badges

14 Comments

Venkadesh S Over a year ago

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 Over a year ago

@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 Over a year ago

I updated my answer. The checkbox is at the bottom :)

Ahs N Over a year ago

The initial position is defined by the CSS class .drag :)

Ahs N Over a year ago

Here it is......just moved the JS to the bottom as I suggested before

|

Collectives™ on Stack Overflow

Replace Text with Image by get user input in Javascript?

2 Answers 2

16 Comments

14 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

16 Comments

14 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related