JS関数が定義されていません（ReferenceError）

Question

どうしたのですか？ imTextが定義されていないというエラーが表示されます。私はいくつかの周りを検索し、それが範囲とは何かがあることがわかった？ onClickイベントの使用も示唆されていないため、私がやりたいことを達成しようとするより良い方法がありますか？

<script> 
    function imText(text) { 
    var c = document.getElementById("canvas"); 
    var ctx = c.getContext("2d"); 
    ctx.font="20px Georgia"; 
    ctx.fillStyle="white"; 
    ctx.fillText(text, 10, 50); 
{ 
</script> 

<div class="canvas"></div> 
    <canvas id="area"></canvas> 
    <form action="text"> 
    <h2>Enter Text:</h2> 
    <input type="text" id="getText" name="text" value="bee"/><br> 

    <input type="button" value="Submit" onclick="imText(document.getElementById('getText').value)" /> 
    </form> 

Answer 1

たぶん、この閉じ括弧：

<script> 
    function imText(text) { 
    var c = document.getElementById("canvas"); 
    var ctx = c.getContext("2d"); 
    ctx.font="20px Georgia"; 
    ctx.fillStyle="white"; 
    ctx.fillText(text, 10, 50); 
} 
</script> 

Answer 2

大したが、ミスのカップル：あなたがしているので</script>前に閉じ括弧とgetElementByIdは、「地域」ではない「キャンバス」を参照する必要がありますID "エリア" このexample link

で

<script> 
    function imText(text) { 
    var c = document.getElementById("area"); 
    var ctx = c.getContext("2d"); 
    ctx.font="20px Georgia"; 
    ctx.fillStyle="white"; 
    ctx.fillText(text, 10, 50); 
} 
</script> 

<div class="canvas"></div> 
    <canvas id="area"></canvas> 
    <form action="text"> 
    <h2>Enter Text:</h2> 
    <input type="text" id="getText" name="text" value="bee"/><br> 

    <input type="button" value="Submit" onclick="imText(document.getElementById('getText').value)" /> 
    </form> 

作品canvas要素を与えます