C++ ときどき ごはん、わりとてぃーぶれいく☆

USAGI.NETWORKのなかのひとのブログ。主にC++。

Canvasのwidthとheightのバギーな特性

JavaScript講座で教えている学生さんからの質問

せんせー、SVGで画像を作ってCanvasにdrawImageしてみてるんですけど、なんかおかしいんですよー…。

"なんかおかしい"画面を覗き込んで見ると、どうも画像表示の切り抜き元のwidthとheightなり描画先のwidthとheightなりがやや複雑に狂った様に見えた。

そこでdrawImage回りのソースを見ると…、いや特に問題ない。最もシンプルな転送元画像を転送先座標にそのまま描画するだけのコード。試しにdrawImageのオーバーロードで転送元と転送先のwidthやheightを直指定してみても状況は変わらない具合。

さて、これは私も以前にプチ切れた事があったのでピンと着た・w・;

実はCanvasのwidthとheightは、JavaScriptで変更するコードを書くとだいたいの人はこれにハマる。下手をするとそのまま解決できずに挫折してしまう。以下の様に、

var w = window.innerWidth;
var h = window.innerHeight;
element.style.width = w + "px";
element.style.height = h + "px";


と、Canvasのwidthとheightをstyleの変更で行うと発症する。これを解決するにはCanvasのwidthとheightをHTML属性で(つまりsetAttributeで)ちまちまと設定する必要がある。

var w = window.innerWidth;
var h = window.innerHeight;
element.style.width = w + "px";
element.style.height = h + "px";
element.setAttribute("width", w);
element.setAttribute("height", h);

こんな風にね・w・

先日の

https://github.com/usagi/html_canvas_2d_particle_effect_sample

でも、

https://github.com/usagi/html_canvas_2d_particle_effect_sample/blob/gh-pages/index.html#L127

みたいな感じでCanvasにはsetAttributeしてる。