こんにちは。アルバイトの村里です。

今回はcanvasに画像などを表示するために使われるdrawImageメソッドについて書いていきたいと思います。

引数の指定

drawImageメソッドには引数の指定方法が複数あります。
具体的には

context.drawImage(image,dx,dy);
context.drawImage(image,dx,dy,dw,dh);
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw);

となっています。この引数の指定方法で躓く可能性があります。
※contextにはgetContext（）メソッドを使いますが、省略します。

落とし穴

引数を指定する際、このメソッドが紹介されているサイトの多くは３つの指定方法の内、一番上のものを使用しているのですが、

context.drawImage(image,0,0);

のように指定しています。
ですが、環境によっては描画された画像が変に拡大されていたり、一部分しか映らないケースがあります。
自分の環境では上手く描画されませんでした。
そこで、仮に画像のサイズを縦横ともに200pxだとして

context.drawImage(image,200,200);

としても上手く描画されません。

解決策

これを解決するためには数値を直接指定するのではなく、一度変数に代入します。

var w = 200;
var h = 200;
context.drawImage(image,w,h);

のようにしてやると解決します。
もし上手くcanvasに画像が上手く描画されないようなら変数を経由していないのが原因かもしれません。