mobile safariのcanvasの解像度を上げる

viewportでinitial-scale=1を指定すると、mobile safariの横幅は320pxとして扱われる。
しかし、iphone4以降では画面が横640pxあるので、自動的にページが2倍に拡大される。
このとき、文字などの解像度は2倍になるのに、canvas要素の解像度は1倍のままなので、相対的に表示が粗くなってしまう。
そこで、他の要素や描画コードにできるだけ影響を与えず、canvas要素の解像度を2倍にする方法。

<canvas id="canvas" width="640" height="640" style="width: 320px; height: 320px;"></canvas>
<script>
    var canvas = document.getElementById("canvas");
    var ctxt = canvas.getContext("2d");
    ctxt.scale(2,2);
</script>

cssで幅と高さを指定すると、canvas要素が拡大縮小される。
そこで、元のcanvas要素の幅と高さをcssで指定し、widthとheight属性にはその2倍の値を指定すると、表示上の解像度が2倍になったcanvas要素が手に入る。
さらに、このままではxy座標まで2倍になってしまっているため、context.scaleで調節する。

※viewportでwidthを640pxにして、スタイルシートの値を2倍にすることでも解決できる。この場合、通常のブラウザではすべての要素が2倍の大きさで表示される。