iPhone 4でも3でも綺麗に表示されるCanvasの使い方

iPhone 4のディスプレイ解像度はiPhone 3GS/3Gに比べ縦2倍、横2倍になっている。Retinaディスプレイと呼ばれるこの高DPIディスプレイはフォントなどのスケーラブルデータを美しく表示する手助けをする。しかし、スケーラブルではないデータ、例えば画像などはそのまま2x2倍へ引き伸ばして表示するため、どうしてもギザギザが目立ってしまう。

• iPhone 4でもPCでも画像を綺麗に表示するCSSの使い方
• iPhone 4に対応したWebサイトを作る方法

これはHTML5のCanvasを使った場合でも同様だ。Canvas要素で描画した内容は基本的にピクセルベースであり、iPhone 4では2x2倍に引き伸ばして表示される。この問題は、画像であれば、CSS3のメディアクエリを使って解像度が2倍率であると判断した場合に2x2倍のサイズで用意した画像を使うようにすることで回避できる。Canvasではどうすればいいかといえば、画像の場合とまったく同じだ。

このあたりのテクニックがGenerating High-Resolution Graphics with HTML5’s Canvas Element - WaltPadにおいてわかりやすく紹介されている。紹介されている内容は次のとおり。たとえば、次のように縦横が150pxのCanvasが用意してあるとする。

canvas {
    border: 1px solid black;
    width: 150px;
    height: 150px;
}

この場合、次のようなJavaScriptコードを挟んでiPhone 4にも対応させることができる。

if(window.devicePixelRatio == 2) {
    canvas.setAttribute('width', 300);
    canvas.setAttribute('height', 300);
    ctx.scale(2, 2);
}

「window.devicePixelRatio == 2」という判定処理は、CSS3メディアクエリで「-webkit-min-device-pixel-radio: 2」を調べるのと同じ効果が見込める。ここでiPhone 4であると判断し、縦横のサイズを2倍に広げるとともに、scale(2,2)を設定してやる。これでiPhone 4ではiPhone 4に適したサイズで描画されるようになる。次にGenerating High-Resolution Graphics with HTML5’s Canvas Elementに掲載されているサンプルをベースにそれぞれiPhone 3GSとiPhone 4でレンダリングしたものを掲載する。

Generating High-Resolution Graphics with HTML5’s Canvas Elementには簡単に試すことができるようにサンプルコードが掲載されているため、これをダウンロードしてきて編集して試すことができる。