jquery-mobile - iPad で HTML5 キャンバス (Phonegap を使用) が期待どおりに機能しない

Question

Phonegap と jQuery mobile を使用して iPad アプリケーションを開発しています。必要な機能の 1 つは、アプリのユーザーが 2 つのボックスに署名 (署名) できるようにすることです。キャンバス要素の「描画」を処理するために、easel.jsを使用しています。

このページの HTML 構造は次のようになります。

<div class="signature-wrapper sw1">
    <canvas class="flexBox" id="myCanvas" width="240" height="240"></canvas>
</div>

<div class="signature-wrapper sw2">
    <canvas class="flexBox" id="myCanvas2" width="240" height="240"></canvas>
</div>

2 つのキャンバス要素は、署名が描画される場所です。これらの各要素の下には、各要素をクリアおよび保存するためのボタンがあります。クリックすると、関数を起動してキャンバスをクリアするか、キャンバスを画像に保存します (画像はキャンバスの上に配置され、クリア時に削除されます)。

保存機能は次のようになります。

function saveStage1(){
    var canvas  = document.getElementById("myCanvas"); 
    var imageData = canvas.toDataURL("image/png");
    $('.sw1').append("<img src='" + imageData +"' style='position: absolute; left: 0px; top: 0px;' />");   
}

基本的には、キャンバスのコンテンツを取得して PNG 画像に保存し、それをキャンバス要素のラッパーに追加するだけです。わかりやすくするために、ここではコードから省略した追加のコードがありlocalStorageますdb.transactions。

この機能は期待どおりに機能しています。

次の関数は、キャンバスをクリアすることです:

function clearStage1(){
    oldMidX, oldMidY, oldX, oldY = null;
    delete window.currentShape;
    stage.clear();
    stage.removeAllChildren();
    stage.update();

    var canvas  = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d");

    var imageObj = new Image();
    imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0);
    };
    imageObj.src = 'images/signature-client.png';
    $('.sw1 img').remove();
}

これにより、キャンバスがクリアされ、いくつかの変数が無効になり、キャンバスが再作成されます。

これは chrome と safari では 100% 動作しますが、iPad では Phonegap アプリケーションとして正しく動作しません。iPad では描画できますが、保存またはクリアをクリックすると、画面に戻って移動しないと描画できません。保存機能とクリア機能の両方で、ページのどこかに JavaScript エラーがあり、ページを「リロード」せずにそれ以上 JavaScript を実行できないようです。

Mac の Safari でコンソールをセットアップして xcode アプリケーションを表示しましたが、ログにエラーはありません。どんな助けでも大歓迎です。