[JavaScript] canvasタグに画像を読み込む

投稿日：2017年10月22日更新日：2018年4月28日

canvasタグに画像を読み込むサンプルです。

サンプルソース

例）ボタンを押すとcanvasに画像(inu.png)を読み込む

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script>
function imageDraw() {
  //2Dコンテキストのオブジェクトを生成する
  var cvs = document.getElementById('cvs1');
  var ctx = cvs.getContext('2d');

  //画像オブジェクトを生成
  var img = new Image();
  img.src = "inu.png";

  //画像をcanvasに設定
  img.onload = function(){
    ctx.drawImage(img, 0, 0, 400, 300);  //400x300に縮小表示
  }
}
</script>
</head>
<body>
  <canvas id="cvs1" width="400" height="300"></canvas>
  <input type="button" id="btn1" value="ボタン" onclick="imageDraw();">
</body>
</html>

<!DOCTYPE html>

<head>

function imageDraw() {

//2Dコンテキストのオブジェクトを生成する

var cvs = document.getElementById('cvs1');

var ctx = cvs.getContext('2d');

//画像オブジェクトを生成

var img = new Image();

img.src = "inu.png";

//画像をcanvasに設定

img.onload = function(){

ctx.drawImage(img, 0, 0, 400, 300); //400x300に縮小表示

}

</script>

</head>

<body>

</body>

</html>

実行サンプル

ボタンを押すと、canvas領域に画像を設定します。

以下、灰色の部分がcanvas領域です。

drawImageの種類

drawImageメソッドの引数指定には以下３種類があります。

【drawImageメソッドの種類】
メソッド	解説
drawImage(img, dx, dy)	img:画像オブジェクト dx:貼付時のX座標 dy:貼付時のY座標
drawImage(img, dx, dy, dw, dh)	img:画像オブジェクト dx:貼付時のX座標 dy:貼付時のY座標 dw:貼付時の横幅 dh:貼付時の縦幅
drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)	img:画像オブジェクト sx:元画像のトリミング開始X座標 sy:元画像のトリミング開始Y座標 sw:元画像のトリミング横幅 sh:元画像のトリミング縦幅 dx:貼付時のX座標 dy:貼付時のY座標 dw:貼付時の横幅 dh:貼付時の縦幅

解説

drawImageを呼び出す時は画像読込みが完了している必要があるため、画像のonloadイベント内で処理を行う点がポイントです。

執筆者：とら