【小ネタ】画面いっぱいのCanvas

HTML5

最近HTML5 Advent Calenderのネタ用にcanvasをいじっています。
canvasを使って映像的なことをやりたい場合、画面いっぱいにcanvasを表示したい！という需要は
結構あるのではないでしょうか？

そんな時向けの小ネタを２つ紹介します。

画面いっぱいのCanvas!

1つ目はユーザーの表示領域いっぱいにcanvasを作成する方法です。
htmlにはcanvasタグを書くだけです。

index.html

<canvas id='canvas'>

ページがロードされた後に次の様なスクリプトを仕込んでおくと、表示領域いっぱいに
canvasを広げてくれます。

script

var canvas = document.getElementById('canvas');

function expandCanvas(){
    var b = document.body;
    var d = document.documentElement;
    canvas.width = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth);
    canvas.height = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight);
}

expandCanvas();

ウインドウの大きさが変更された時に上記のスクリプトを呼ぶとちょうど良いかもしれませんね。

画面いっぱいのCanvas!の大きさを取得する。

二つ目はcanvasに限らないのですが、要素の大きさを取得する方法です。
ウインドウサイズに合わせてcanvasを表示する場合、上記のようにスクリプトで解決する方法と
Media Queriesを使ってスタイルシートで解決する方法があると思います。

スタイルシートに記述してあるcanvasのサイズを取る方法はなかなか悩ましいな…。
と思っていたら以下のサイトにその方法が載っていました。

id:sandai:20100616

こんな感じで取得できるようです。

    var style = element.currentStyle || document.defaultView.getComputedStyle(element, '');
    var width = style.width;

素敵ですね :)