Processing.jsをRetina対応させるには

おはようございます。息子と迎えたGWの前半を実家で寝込んで、息子と、弟の子どもとの初対面の様子を見ることができなかった@kjunichiです。

新しいiPadでProcessing.jsエディタをWebアプリベースで作る

さて、WebカメラをJavaで使うには？と調べている際にその存在を知ったProcessing。そして、HTML5のCanvasを使ったJavaScript版のProcessing.js。 iPadで手軽に使えるのは、断然Processing.jsの方です。ところが、新しいiPadや、iPhone4S以降のRetinaディスプレイでは、その解像度を活かすには工夫が必要でした。

Canvasも表示するサイズと、描画時？のサイズの指定が個別にできる

imgタグは、元画像のサイズとは別に表示サイズを指定することで、巷ではRetina対応していることはすぐに分かりました。

Canvasでもこれと同様なことが可能でした。当初は、ろくに調べずに、スケールを0.5で対応してました。w

if(window.devicePixelRatio == 2) {
	// Retina端末の場合
	var w = x/2;
	var h = y/2;
	var canvas = document.getElementById("canvasName");
	canvas.style.width=w+"px";
	canvas.style.height=h+"px";

	canvas.addEventListener("touchstart", touchHandler, false);
}

Processing.jsのCanvasに触れると、Canvasが拡大してしまう

Processing.jsのCanvasに触れると、Canvasが拡大してしまいます。

仕方なく、Processing.jsのソースを読んでいくと、touch系のイベントで、Canvasの styleを設定している箇所がありました。

touchイベントのリスナー追加で対応

processing.jsのイベント処理に加えて、独自の処理を追加して、こちらにCanvasのスタイルを再指定する処理を追加することで対応できました。

var applyRetina(){
        if(window.devicePixelRatio == 2) {
	    var canvas = document.getElementById("canvasName");
	  
	    if(canvas.style.width==canvas.width ||
	      canvas.style.width=="") {
		canvas.style.width=canvas.width/2+"px";
		canvas.style.height=canvas.height/2+"px";
	    }
	}
};
targetCanvas.addEventListener("touchstart", applyRetina, false);