добавить текст на изображение, используя Javascript и Canvas

У меня есть вопрос по этой теме
Как добавить текст на изображение, используя Javascript и Canvas

Я не могу получить изображение с первого раза. Но изображение загружается, когда я нажимаю обновить.

Это мой код из файла php:

<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>

Это мой код из файла js:

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);
});
};