[HTML5] CanvasでRetina対応を行う

こんにちは、Canvasでバリバリ仕事中の@yoheiMuneです。
最近のWebアプリでCanvasを使っているアプリが多いですが、Retina対応できておらず、にじんだ感じになっているアプリが多々あり。。
なので、CanvasでRetina対応できるのかを調べました。今回はその結果を記載したブログとなります。

Canvasで普通に描画するとにじむ

Canvasの描画内容をRetinaでない多くのPCブラウザで見る分には問題ないのですが、 iPhoneなどのRetina対応したブラウザで見るとにじんで見えてしまいます。

画像などの表示ではRetina対応を行う事が多いですが、 CanvasでもRetina対応する事でにじまずに描画内容を表現できるようです。

CanvasでRetina対応

CanvasでRetina対応をする方法は、画像のRetina対応の考え方と同じで、 描画した内容を1/2のサイズで表示することでキレイに表示することが可能となるようです。
以下のようにCanvasエレメントを作成します。

<canvas id="canvas2" width=600 height=400 style="width:300px;height:200px;"></canvas>

Canvasの論理的な大きさはwidth=600,height=400にしつつ、 実際に表示する大きさは論理的な大きさの半分にします。

Retina対応したCanvasにcanvasのメソッドで描画する

lineTo, arc, stroke, fillなどのCanvasで図形を描画するメソッドの場合は、 以下のように実装する事で、Retina対応前と同じ座標で描画する事が出来ます。

// CanvasとContextを取得する。
var canvas = document.getElementById("canvas3");
var ctx    = canvas3.getContext("2d");

// 描画内容を2倍にする。ここの設定がポイント！！
ctx.scale(2,2);

// 図形を描画する。
ctx.beginPath();ctx.strokeRect(50,50,150,100);
ctx.strokeRect(85,75,25,25);
ctx.strokeRect(135,75,25,25);
ctx.moveTo(70, 140);
ctx.lineTo(120,120);
ctx.lineTo(170,140);
ctx.stroke();

scaleで縦横2倍にすることで、その後のcontextで描画する際には、2倍に拡大解釈されてキレイに描画できます。

Retina対応したCanvasに画像を描画する

まずは、Retina対応する為の縦横2倍の画像を用意します。
そして画像を描画する際には、"ctx.scale(2,2)"を使ってもぼけてしまうため、 そのため、自分で座標や大きさを2倍にした値を計算して、描画する必要があります。
ここ、もっと良い方法があれば知りたい。

以下がサンプル実装の内容となり増す。

// CanvasとContextを取得する。
var canvas1 = document.getElementById("canvas1");
var ctx1    = canvas1.getContext("2d");

// Retina対応用の縦横2倍の画像を読み込む。
var image1 = new Image();image1.src = "image002.jpg";
image1.onload = function(){

   // 描画ポジションを通常の2倍の座標にして、描画する。
   ctx1.drawImage(this, 20, 20);
}

これでキレイに見えるようになります。

Retina対応した際の実際のサンプル

実際に通常の描画をした場合と、Retina対応した描画をしたサンプルを以下に作ってみました。
iPhoneなどのRetinaな端末で見ると、違いが分かりやすいかと思います。

your current devicePixelRaito is .

canvas draw image for nomal

canvas draw image for retina

canvas draw object nomal

canvas draw object for refina

その他注意点とかTipsとか

以下では、情報を集めていて気になった注意点とかTipsとかを記述します。

• 描画領域が大きくなるので、パフォーマンスに影響しやすい。スムーズに描画できるようにチューニングが必要かも。
• AndroidなどRetina対応が不要な端末もある。window.devicePixelRatioの値を見て、Retina対応するか否かを切り替える事も可能。
• Androidで上手く動くかは確認が必要。特にAndroid4系の実装は気になる。
• Retina対応用の画像を扱うにあたり、画像サイズが大きい場合、iPhoneで上手く動かない場合も。iPhoneにおける画像サイズの制限は、こちら(Know iOS Resource Limitの箇所)を参照。

2012/10/06 追伸
実際に現在仕事で行っているソーシャルゲームで、CanvasのRetina対応を行ってみました。
iPhone4, iPhone5, GallaxyS2(Android2.3)ではキレイに表示され、パフォーマンスも劣化しませんでした。

最後に

CanvasのRetina対応は一応可能なものの、Androidの端末が不安、パフォーマンスが不安など検証すべき事が多いように感じます。
この不安点に関する情報がありましたら、ブログに追記して行ければと思います。

最後までご覧頂きましてありがとうございました。