キャンバスimg.srcをテキスト入力から変更する

Question

私はキャンバスの中にデフォルト画像を持っています。私はテキスト入力に別のイメージソースを貼り付け、ボタンをクリックするとimg.srcを更新できるようにしたい。

<canvas id="canvas" width="300" height="400"></canvas> 
    ... 
<label for="image">Paste the img url here</label> 
<input type="text" name="pic" id="image"> 
<button onclick="updateImg()">Submit img</button> 

とJavaScript：：私が間違っているのは何

... 
var image = "https://www.whatever.com/image.png"; 
var img = new Image(); 
img.src = image; 
img.onload = function() { 
    draw(this); 
}; 
function updateImg() { 
    image = document.getElementById("image").value; 
} 
... 

ここ はhtmlですか？

p.s.私の英語のために申し訳ありません。

Answer 1

読み込んだ後に画像を描画する必要があります。

<canvas id="canvas" width="300" height="400"></canvas> 
    ... 
<label for="image">Paste the img url here</label> 
<input type="text" name="pic" id="image"> 
<button onclick="updateImg()">Submit img</button> 


<script> 
    function updateImg() { 
    var canvas = document.getElementById('canvas'); 
    var context = canvas.getContext('2d'); 
    var imageObj = new Image(); 

    imageObj.onload = function() { 
     context.drawImage(imageObj,0,0); 
    }; 

    imageObj.src = document.getElementById("image").value; 
    } 
</script>