add text on image using Javascript and Canvas

Question

I have a question about this topic
How to add text on image using Javascript and Canvas

I am unable to get the image in the first go. But image load when I hit refresh.

This is my code from php file:

<canvas id="canvas"> </canvas>
<form class="myNameForm">
    <?php echo '<img style="display:none" class="myimage" 
        src="./save/'.$filenamewithoutExt.'" crossorigin="anonymous">';?>
    <label class="inpLable" for="input">Enter Name: </label>
    <input class="inp" maxlength="12" type="text" id="inp"/>
</form>

This is my code from js file:

window.onload = function() {
    var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d');
    canvas.width = $('img').width();
    canvas.crossOrigin = "Anonymous";
    canvas.height = $('img').height();
    ctx.drawImage($('img').get(0), 0, 0);
    $(document).on('input', '#inp', function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.font = "20pt Verdana";
        ctx.drawImage($('img').get(0), 0, 0);
        ctx.fillStyle = "white";
        ctx.fillText($(this).val(), 170, 590);
    });
};

the problem is because of "images load asynchronously" but i am unable to fix it. stackoverflow.com/questions/30009528/… — Usman Ahmed Mani
– Usman Ahmed Mani, Commented Dec 19, 2018 at 16:44
I'm guessing the problem is <img> has display: none thus it can not have offsetWidth — mrReiha
– mrReiha, Commented Dec 19, 2018 at 16:47

TeaNyan · Accepted Answer · 2018-12-19 17:23:29Z

2

I have made small changes in your code

<canvas id="canvas"> </canvas>
<img style="display: none" class="myimage" src='https://picsum.photos/200/200'/>
<label class="inpLable" for="input">Enter Name: </label>
<input class="inp" maxlength="12" type="text" id="inp"/>

And JS

$('#inp').on('input', function(){
  var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d');
  canvas.width = $('img').width();
  canvas.crossOrigin = "Anonymous";
  canvas.height = $('img').height();
  ctx.drawImage($('img').get(0), 0, 0);
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.font = "20px Verdana";
  ctx.drawImage($('img').get(0), 0, 0);
  ctx.fillStyle = "white";
  ctx.fillText($(this).val(), 10, 50);
});

Here I have created a working JSFiddle

answered Dec 19, 2018 at 17:23

TeaNyan

5,0895 gold badges19 silver badges32 bronze badges

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

2 Comments

Usman Ahmed Mani Over a year ago

But the image load when the user starts typing. I want the image to load when page loads. not when user starts typing.

IceMetalPunk Over a year ago

So you want the image only to show after a refresh, but show what was typed before the refresh? Canvases are cleared when the page unloads, which includes during a refresh. So you'll have to store the user input somehow (either server-side, or locally with session storage or local storage or something similar), and then load the text from there on page load and re-create the canvas image.

Collectives™ on Stack Overflow

add text on image using Javascript and Canvas

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related