GalaxyS4のWebviewでのCanvasがおかしい件の解決方法

Android


Galaxy S4のWebviewで、非同期処理の中でのCanvasの描画がバグってる


というエントリを書いて放置していたところいくつか解決方法を書いてくださった方がいて、それらを参考に再び戦ってみました。

その1. Create.JSの場合

// 擬似コード
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width+1, canvas.height+1);
img.onload = function() {
  ctx.drawImage(img, 0, 0, 100, 100);
};

その2. 要素を非表示にしてCanvasいじって要素を表示する

// 擬似コード
var $canvas = $("#canvas");
$canvas.hide();
var ctx = document.getElementById("canvas").getContext("2d");
img.onload = function() {
  ctx.drawImage(img, 0, 0, 100, 100);
  $canvas.show();
};
  • ちなみにhide()を非同期処理の中でやるとダメなようです...
// 擬似コード
// うまくいかない例
var $canvas = $("#canvas");
var ctx = document.getElementById("canvas").getContext("2d");
img.onload = function() {
  $canvas.hide();
  // ↓ちなみにしてもダメ
  // var ctx = document.getElementById("canvas").getContext("2d");
  ctx.drawImage(img, 0, 0, 100, 100);
  $canvas.show();
};

その3. アプリ側でハードウェアアクセラレーションをオフにする


とんちにしか思えないのですが、ブラウザに気持ちになって考えればわかるんですかね...。