Canvas のサイズは2種類あるが、 excanvas のサイズは1種類しかない

ブラウザに図形を描画するのに Canvas というオブジェクトがある。
だけど IE は Canvas に対応していない、
代わりに Google 謹製の excanvas.js というJavaScriptライブラリを使っている。

そのとき、サイズの扱いが違っていてちょっと困ったのでそのメモ。

とりあえず、違いが分かるページを作ってみた。
下記の URL を IE とそれ以外（FireFox, Chrome, Safari）で見て欲しい。
描画される図形が違っているはず。
http://mohayonao.sakura.ne.jp/labs/canvas_excanvas.html

Canvas の場合

Canvas.style.width, height は Canvas 要素自体の見た目の幅や高さを指定でき、
Canvas.width, height で Canvas で描画する領域のサイズを指定できる。

たとえば、

Canvas.style.width = "100px";
Canvas.style.height = "100px";
Canvas.width = 1000;
Canvas.height = 1000;

とした場合、見た目のサイズは 100px * 100px だが、
描画出来る範囲は 1000 * 1000 となり、描画されるグラフィックは 100px * 100px の見た目に縮小される。
逆に 100px * 100px の要素内に 10 * 10 のグラフィックを拡大して描画することもできる。

excanvs の場合

Canvas.style.width, height と Canvas.width, height は同じ。

たとえば、

excanvas.style.width = "100px";
excanvas.style.height = "100px";
excanvas.width = 1000;
excanvas.height = 1000;

とした場合、要素自体の見た目と描画範囲が 1000 * 1000 となる。
.style.width と .width は全く同じのようで、
順番を入れ替えると要素自体の見た目と描画範囲が 100px * 100px になってしまう。

Canvas は見た目の描画サイズが 1 : x の関係にできるが、
excanvas はそれができなく、常に 1 : 1 の関係になってしまう。

解決方法
知らない。とりあえず excanvas にあわせて 1 : 1 でサイズしていして、
描画するときに拡大比率をかけ算して逐次計算するとか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="ja"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
  canvas { margin: 5px; border: solid 1px gray }
</style>
<title>canvas vs excanvas</title>
<!--[if IE]><script type="text/javascript" src="./excanvas.js"></script><![endif]-->
</head>
<body>
  <canvas id="canvas1"></canvas>
  <canvas id="canvas2"></canvas>
  <canvas id="canvas3"></canvas>

</body>
<script type="text/javascript">
<!--
    window.onload = function() {

        function hoge(e, size) {
            e.width  = 100;
            e.height = 100;

            e.style.width  = size + "px";
            e.style.height = size + "px";

            var ctx = e.getContext("2d");

            ctx.globalAlpha = 0.5;

            ctx.beginPath();
            ctx.arc( 50,  50, 50, 0, Math.PI*2, false);
            ctx.fillStyle = "#ff0";
            ctx.fill();
            ctx.closePath();

            ctx.beginPath();
            ctx.arc(100, 100, 50, 0, Math.PI*2, false);
            ctx.fillStyle = "#00f";
            ctx.fill();
            ctx.closePath();
        }
        
        hoge(document.getElementById("canvas1"), 300);
        hoge(document.getElementById("canvas2"), 200);
        hoge(document.getElementById("canvas3"), 100);
    };
//-->
</script>
</html>