（Javascript）Canvasの基本 画像を表示する

canvas内に画像を読み込んで表示するためにはdrawImageメソッドを使用します。引数の数によって３パターンの描画方法を使うことができます。

画像を表示する

drawImage ( src, x, y )

src

表示する画像のパスを文字列で記述します。相対パスも使用できます。

x、y

画像を表示する場所を指定します。

画像を縮小・拡大して表示する

drawImage ( src, x, y, width, height )

src

表示する画像のパスを文字列で記述します。相対パスも使用できます。

x、y

画像を表示する場所を指定します。

width、height

表示する画像の大きさを指定します。

画像をトリミングして表示する

drawImage ( src, sourceX, sourceY, sourceWidth, sourceHeight, drawX, drawY, drawWidth, drawHeight )

src

表示する画像のパスを文字列で記述します。相対パスも使用できます。

sourceX、sourceY

srcから切り出す部分の左上の座標を指定します。

sourceWidth, sourceHeight

srcから切り出す部分の幅と高さを指定します。

drawX, drawY

画像を表示する場所を指定します。

drawWidth, drawHeight

表示する画像の大きさを指定します。

サンプル

実際に描画を行うためには、対象となる画像のダウンロードを行う必要があります。ダウンロードの完了を待ってから描画処理に映るように、addEventLintenerでイベントとして処理を登録します。以下はそのサンプルです。

var img = new Image();
// Imageオブジェクトにloadイベントを登録
img.addEventListener('load', function(){
    // 描画
    context.drawImage(this, 0, 0);
}, false);

// 画像の読み込み
img.src = 'picture01.jpg';