URLから画像を読み込み、HTML5 Canvasに描画します

Question

JavaScriptのURLから画像を読み込めません。以下のコードは機能しますが、画像をhtmlからロードする必要はありません。純粋なJavaScriptを使用して、URLから画像をロードしたい。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("imImageId");
ctx.drawImage(img, 0, 0);

Answer 1

単純です。JavaScriptで画像オブジェクトを作成し、srcを設定して、描画する前にロードイベントを待機します。

実例：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
};
img.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';

<canvas id="myCanvas"></canvas>

Answer 2

これは簡単...

var img=new Image();
img.onload=start;
img.src="myImage.png";
function start(){
    ctx.drawImage(img,0,0);
}