0

フォルダ内のpngデータをcanvasに描画したいのですが。
以下のようなerrorをもらってしまいました。

chrome

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': 
The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement 
or ImageBitmap)'

safari

drawImage — index.html:39TypeError: Type error

type errorと書いてあるのでdrawImage近辺でくまなく探したのですが。どうしても発見できません。
試しにfillRectで四角を描画したら正常に描画できました。
どうしてもわからないので教えて下さい。

  window.addEventListener('load', eventWindowLoadew,false);
function eventWindowLoadew(){
  canvasApp();
}
function canvasSupport(){
  return Modernizr.canvas;
}
function canvasApp(){
  if(!canvasSupport()){
    return;
  } else {
    var canvas = document.getElementById("mycanvas");
    var ctx = canvas.getContext("2d");
  }
  drawScreen();

  var image1 = new Image();
  image1.src = "mon_024.png";
  image1.addEventListener("load", eventMonsterLoaded, false);

  function eventMonsterLoaded(){
    drawScreen();
  }
  function drawScreen(){
      ctx.drawImage(image1, 0, 0); //39行目です。ここにエラーがでます。
  }
}
1
  • 既に回答がありますが、else{ }の後のdrawScreen();を削除します。
    – BLUEPIXY
    Commented 2016年9月21日 13:34

1 件の回答 1

2
function canvasApp(){
  if(!canvasSupport()){
    return;
  } else {
    var canvas = document.getElementById("mycanvas");
    var ctx = canvas.getContext("2d");
  }
  drawScreen();   // ←

  var image1 = new Image();

この時点ではまだimage1には何も代入されておらずctx.drawImage()に失敗するのも当然です。


蛇足ですが

var image1 = new Image();
image1.src = "mon_024.png";
image1.addEventListener("load", eventMonsterLoaded, false);

この順ですとmon_024.pngがキャッシュ済みの場合に先に読み込みが完了してしまってloadイベントが発生しないことがあります。先にaddEventListener()すべきです。


Image()(=<img>要素)ではloadイベントを待つ必要がありました。近年はfetch関数およびcreateImageBitmap関数が利用できます。これらを使うとイベントに頼らない実装ができます。

fetch("mon_024.png")
.then(response => response.blob())
.then(blob => createImageBitmap(blob))
.then(image => ctx.drawImage(image, 0, 0));

もしくはawait function内であれば

const response = await fecth("mon_024.png");
const blob = await response.blob();
const image = await createImageBitmap(blob);
ctx.drawImage(image, 0, 0);
2
  • ありがとうございます。無事描画できました。読み込む前にfunctionを起動してたのですね...。 理解力が足りなくてすみません。先にaddEventListenerをするとはどういうことなんでしょうか...
    – coupy
    Commented 2016年9月21日 14:18
  • @coupy image1.src = …; と image1.addEventListenerの順番を逆にするということです。イベント登録して画像がロードされたイベントで実際の描画関数が呼ばれるということなので、イベント登録が完了する前に読み込みが終了するとイベントが起動されない場合がある(登録イベントが起動されないと描画関数も呼び出されない) なのでまずイベントの登録をするということです。
    – BLUEPIXY
    Commented 2016年9月21日 15:40

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。