スマートフォンのcanvasタグのバグのまとめ

JavaScript

ほとんどのスマートフォンのウェブブラウザはcanvasタグに対応していますが、バグだらけです。以下、色々な環境で試したバグのまとめです。

iPhone OS 3.1

このバグは iOS 4 では、直っています。
iPhone OS 3.1 では、fillText() などの文字列描画系がバグっています。画面が上下反転して、フォントなども反映しません。お持ちの方は 実際のサンプル - fillText() メソッド - Canvasリファレンス - HTML5.JP でお試しください。おかしな位置に文字が表示されます。このバグは、iPod touch、iPhone 全てで発生します。

まもなく、iPhone OS 3.2 が出ますが、直っていることを強く祈ります！

Android 2.1

このバグはAndroid 2.2では、直っています。

Android 2.0, 2.1が、一番ひどいです。Sign in - Google Accounts にも記載されているように、drawImage() が致命的にバグっています。このバグは実機でもシミュレータでも発生します。

まず、screen.width / 320 でズームがかかります。Nexus Oneなど480pxが主流となっていますが、480 / 320 = 1.5倍のズームがかかります。大きさも位置も同じようにズームがかかります。scale(1.5, 1.5) が適用されたのと同じ状態です。これは、想像ですが、320px でも 480px でも、同じように表示されるように、どこか別の場所で使われているロジックがそのままcanvasタグにも適用されているのではないかと思います。

加えて、これを、scale() 使って元に戻そうとすると、transform() 系は引数が Image の場合、なんと2回適用されます！なので、transform() の変換行列は、行列の平方根をとる必要があります！（笑）

var zoom = Math.sqrt(320 / screen.width);
context.scale(zoom, zoom);

このようなコードで直ります。しかしながら、これが使えるのは、自分では transform() 系を使わない かつ drawImage は引数9つは使わない かつ drawImage の第1引数は Image という3条件が成立する場合などで、もう少し使い込むとさらに色々バグがあって、詳細は、Sign in - Google Accounts の僕のコメントをご覧ください。

Android が HTML5 の普及を阻害している状況なので、HTML5 の普及を願う方は、このバグのスターボタンを押してください。"star" が増えると、より速く直してくれるのではないかと期待しています！

Android 1.6

Android 2.1 には、こんな致命的なバグがあるのに、Adroid 1.6 では問題ないようです。Xperia でも問題ないことを確認しましたし、シミュレータ上でも問題ないようです。

Firefox for mobile 1.0

実機では、試していないのですが、Firefox for mobile 1.0 RC3 の Windows 版を使った限りでは問題はないようです。

（追記）iOS 5.x, 6.x

回転を伴う transform() をして createPattern() し、その上で、さらに描画先にも transform() がかかっている時に fill() するとおかしな位置に描画されるみたいです。

（追記）Android 〜4.x

putImageData() がαチャンネルを伴っているときに RGB にαの値をかけ算しておかないといけない（premultipliedでないといけない）というバグがあります。