（ちょっとメモ）CanvasサイズをCSS3のvw, vhで取得してみたけど...

先日アップした「[69-12] canvasをサイトの背景に使おう」で、
Canvasのサイズをブラウザ ウィンドウサイズと一致させるためには、
「Canvasの親要素にdivを用意し、そのdivはCSSでフルサイズ指定。Canvasサイズはその親のdivから取得するのが共通の方法みたい」と書きました。

そこに「width:100vw; height:100vh」でいけるんじゃないかと情報をいただき、
早速試してみました。

vw, vh は、CSS3での新しい単位
「v」は「Viewport」の頭文字。ビューポートとはデバイスの表示領域のことです。
1vw = ビューポートの幅の 1/100（100vwで横幅いっぱい）
1vh = ビューポートの高さの 1/100（100vhで高さいっぱい）です。

確かに親のdivなんかなくても Canvasのサイズ取得はできました。
（それだけでも画期的か）
しかし、描画が変にボケてしまうんです。小さいものを拡大したようなボケ方で。残念！
Canvasの描画部分は、座標や幅・長さなどはピクセル単位なのですが、これが、vw, vh単位に影響されるのか、ビューポートへの割合に変化するようです。（それでなぜボケるのかは不明ですが）

サイズ取得はできるのに、描画部分が「ボケ」て使い物にならない

サンプルはこちらです。Canvasがちゃんと背景になっていますが、描画がボケボケ。
描画部分は「サンプル2」を流用しています。
Canvasをサイトの背景にしよう：サンプル番外編

こちらが「サンプル2」。ラインがクッキリ。
Canvasをサイトの背景にしよう：サンプル2

「サンプル2」の描画部分のソースをそのまま流用した時点では、
このように背景が白くとんでいました。

ですが、少しラインらしきものも現れます。
「ctx.globalCompositeOperation = "lighter"」の影響で、ラインの幅が太すぎて重なり部分が多くて、全体に白くとんでいるんだと思われます。

ラインの幅の数値を少なくしたら、冒頭の「サンプル番外編」のサンプル表示になりました。そこで、単位がピクセルでなく表示領域に対する割合になったのではないかと思った次第です。

ラインの幅は、サンプル2では「150」にしていました。150pxのつもりで指定していますが、これを150vw（またはvh）で解釈されたのではないか？と。
「30」にしたら、そこそこ見られるようになりました。

ただ、単位が変わったからといって、なぜボケるのか？
小さく作って拡大描画しているからボケるんだと思うけど、どんな数値で描画して何を基準に拡大率を決めているのかが、サッパリ。
あれこれいじってみましたが、どうにも調整できず、あきらめました。
結局、親のdivのサイズをピクセルで取得して、Canvasサイズに当て込む方法が、今のところスタンダード というか「実用的」だと思います。

そもそも、CanvasをCSSで親のbodyに対して縦横100％に指定しても、描画コンテキストがあると描画できなかったため、仲介に親のdivを設けたのでした。
ということは「Canvasサイズはピクセルで取得しなければならない」ということじゃないかな。
...とにかく、もっと簡単にサイズ取得ができるといいのですが。