URLから画像を読み込んでHTML5 Canvasに描画する方法

URLから画像を読み込んでHTML5 Canvasに描画する方法

JavaScriptでURLから画像を読み込み、Canvasに描画するには、まずImageオブジェクトを作成し、そのsrcプロパティに画像のURLを設定します。

ここで重要なのは、画像の読み込みが完了してから描画処理を行うという点です。onloadイベント（loadイベント）が発生するまで待ってからdrawImage()メソッドを呼び出さないと、まだ読み込まれていない空の画像を描画しようとしてしまい、意図した結果になりません。

実装の流れ

1. document.getElementById()で対象のcanvas要素を取得する
2. getContext("2d")で2D描画コンテキストを取得する
3. new Image()で新しい画像オブジェクトを作成する
4. onloadイベントハンドラ内でdrawImage()を呼び出して描画する
5. srcプロパティに画像のURLを設定する

サンプルコード

以下は、指定したURLの画像をキャンバスに描画する基本的な例です。

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var myImg = new Image();
myImg.onload = function() {
    context.drawImage(myImg, 0, 0);
};
myImg.src = 'https://www.tutorialspoint.com/images/seaborn-4.jpg?v=2';

このコードでは、画像のダウンロードが完了したタイミングでonloadイベントが発火し、drawImage(myImg, 0, 0)によってキャンバスの左上（座標0, 0）を起点として画像が描画されます。

なお、drawImage()の第2引数と第3引数を変更すれば描画位置を調整でき、さらに幅と高さを指定することで画像の拡大・縮小表示も可能です。