Переменная для context.fillText

Question

Привет, я пытаюсь поместить переменную в текст для context.fillText. Прямо сейчас на экране отображается «undefined». Я хочу показать текст в Canvas, который вводит пользователь. Мой код:

<canvas id="myCanvas" width="578" height="200"></canvas> 
<form> 
<label for "text">Text:</label> 
<input type="text" id="text"> 
<input type='submit' id="submit" value="submit" onClick="canvas_text()" > 
</form> 
<script> 
var t, word; 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 
    t = document.getElementById('text').value; 
function canvas_text() { 

if(t == '' || t == null) { 
word = "you forgot to put something"; 
} else { 
word = t; 
} 
} 
    context.font = '40pt Aria'; 
    context.fillStyle = 'red'; 
    context.fillText(word, 150, 100); 
</script> 

Answer 1

ход этой линии:

context.fillText(word, 150, 100); 

в функцию canvas_text. Как и в настоящее время, он выполняется до того, как была определена переменная «text».

Edit: эта линия должна быть внутри функции тоже:

t = document.getElementById('text').value;