htmlのcanvas要素で大きな画像がうまく表示できない

htmlのcanvas要素ででかい画像表示しようと思ったらうまくいかなくてはまった。

↓こんな感じで画像を縮小表示させようとしたら、300px * 150pxくらいの画像の切れっ端しか表示されない。

var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
context.drawImage(img, 0, 0, 600, 600);
document.body.appendChild(canvas);

いろいろ調べたら、どうやらcanvas要素にwidthとheightを指定してあげないと、でかい画像表示できない様子。

var canvas = document.createElement("canvas");
canvas.width = 600;
canvas.height = 600;
var context = canvas.getContext("2d");
context.drawImage(img, 0, 0, 600, 600);
document.body.appendChild(canvas);

半日くらいずっと調べてて、外人のブログに書いてあったの見つけてやっと分かった。。

大学で研究してたときもそうだったけど、ちょっと新しい技術の資料は日本だと全然見つからないな。

英語圏に住んでる人羨ましいわ。