UIWebViewでHTML5 CanvasをRetinaディスプレイに対応させる方法

RetinaディスプレイでHTML5 Canvasの画像を鮮明に表示するには

iPhoneなどのRetinaディスプレイは、物理ピクセル数がCSSピクセル数の2倍（devicePixelRatio = 2）になっています。そのため、UIWebView内でHTML5 Canvasに画像をそのまま描画すると、解像度が足りず画像がぼやけて表示されることがあります。

Retinaサイズの画像をCanvasにきれいに表示するには、Canvasの実サイズを window.devicePixelRatio 倍に拡大し、その後 scale() メソッドで座標系を調整するのがポイントです。以下のコード例を参考にしてください。

var context = myCanvas.getContext("2d");

context.attr("width", width * window.devicePixelRatio);
context.attr("height", height * window.devicePixelRatio);

context.scale(window.devicePixelRatio, window.devicePixelRatio);
context.drawImage(img, x, y, width, height);

コードのポイント解説

1. Canvasのサイズを拡大する
Canvasのwidth・heightに window.devicePixelRatio を掛けた値を設定します。これにより、Canvasの実際の描画領域がRetina解像度に合わせて拡大されます。

2. 座標系をスケーリングする
context.scale() を使って描画座標系をdevicePixelRatio分だけ拡大します。これにより、以降の描画命令では従来どおりCSSピクセル単位の座標やサイズを指定できるようになります。

3. 画像を描画する
drawImage() で画像を描画します。座標系がすでに調整されているため、論理サイズ（width・height）を指定するだけで、高解像度のまま鮮明に描画されます。

この手法はUIWebViewに限らず、WKWebViewやモバイルSafariなど、高DPIディスプレイを搭載した環境全般で有効です。画像だけでなく、Canvas上に描画するテキストや図形も同様にくっきりと表示できるようになります。