CanvasをRetinaディスプレイに対応させる

imgタグやCSSのbackgroundに設定した画像の場合、2倍サイズの画像を用意してやればいいのですが、
Canvasは例えば2倍サイズの画像をdrawImage()で縮めて貼付けてもRetinaディスプレイ上ではボケボケです。

canvas.widthとcanvas.style.widthは別物

canvas.width, heightは描画領域の大きさを、
canvas.style.width, heightはCanvas自体の大きさを定義しています。

Retinaディスプレイに対応させる場合、描画領域の大きさをCanvas自体の大きさに対して
2倍にしてやる必要があります。

例えば、100px*100pxのCanvasの場合

<canvas width="200" height="200" style="width: 100px; height: 100px;"></canvas>

こうすることで200px*200pxのCanvasが100px*100pxに縮めて表示されます。
あとは2倍サイズの画像や図形を描画してやればOKです。

サンプル

Retinaディスプレイに対応させたCanvas上で図形、テキスト、画像など描画したサンプルを作りました。
通常のPCで見るとほぼ同じですが、Retinaディスプレイの端末から見ると違いが分かるかと思います。