HTML5 Canvas に画像をオブジェクトとして表示したい

Question

こんにちは。いつもありがとうございます。最近Canvasを使う機会がありまして勉強中です。

##エラーが出ます
Canvas に画像をオブジェクトとして表示しようと、下のコード実行すると、

window.onload = function () {
    var treeArray = [];
 
    ctx = document.getElementById('canvas').getContext('2d');
    for(var i = 0; i < 5; i++){
      treeArray.push(new Tree("../assets/images/tree.png",i*100,i*100))
      treeArray[i].draw();
    }
}//Close window event listener

function Tree(imgURL,imgWidth,imgHeight){
  this.img = new Image;
  this.img.width = imgWidth;
  this.img.height = imgHeight;
  this.img.src = imgURL;
  this.translate  = {
    x : (window.innerWidth - this.img.width)/2,
    y : (window.innerHeight - this.img.height)/2
  }
}

Tree.prototype.draw = function(){
	this.img.addEventListener("load", function(){
	    	ctx.drawImage(this.img,0, 0);
	    }, false)
}

function reset() {
  location.reload();
}

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

このエラーが出ます。
しかし、オブジェクトとして表示しなければ普通に表示されます。何が間違っていますか？？わかる方おられましたら教えてください。お願いします。

###追記
オブジェクトとして表示しなかった場合のコードです。

var imgTest;


window.onload = function () {
    var treeArray = [];
    imgTest = new Image;
    imgTest.src = "../assets/images/test.png"
    ctx = document.getElementById('canvas').getContext('2d');
    imgTest.onload = function(){
    	ctx.drawImage(imgTest, 0, 0);
    }
}
}

Comments

[退会済みユーザー]

ところどことで使っている this は何を意図していますか？　「オブジェクトとして表示しなければ」とは具体的にどうしているのですか？

[kei344]

「オブジェクトとして表示しなければ」のコードも質問文に追記ください。

Answer 1

このaddEventListenerに渡した関数の中でthisを使っていますが、このthisはTreeのインスタンスを差していません。なのでthis.imgはundefinedとなり、質問者様の言うようなエラーが発生します。

Tree.prototype.draw = function(){
    this.img.addEventListener("load", function(){
            ctx.drawImage(this.img,0, 0);
        }, false)
}

これの対処法はいくつかありますが、簡単なものはFunction.prototype.bindメソッドを使って、関数の中のthisを固定することです。具体的には次のように書き直します。

Tree.prototype.draw = function(){
    this.img.addEventListener("load", function(){
            ctx.drawImage(this.img,0, 0);
        }.bind(this), false)
      //  ^---- ここでbindを使ってthisを固定している
}

これで期待通りに動くかと思います。

---

参考

• Function.prototype.bind() - JavaScript | MDN

Comments

[Tats.N]

ありがとうございます。思った通りに表示できました。

Answer 2

Tree.prototype.draw = function(){
   this.img.addEventListener("load", function(e){
           ctx.drawImage(e.target,0, 0);
       }, false)
}

とか。