jquery-mobile - Canvas 自体のコピーを作成する

Question

雲を描画しようとしている HTML5 キャンバスがあります。Ripple でのテスト時に Chrome で実行すると正常に動作し、エミュレータで実行すると正常に動作しますが、実際のデバイス (10 インチ Samsung Galaxy Tab) で実行すると失敗します。

テスト目的で、ほとんどすべてのコードをコメントアウトし、キャンバス全体に色付きの長方形を描画して、キャンバスの境界線が見えるようにしました。画面の左上隅近くに黄色の四角形が 1 つ表示され、左側に少しの空白 (約 15px になる) とヘッダーの下に空白 (四角形の上部から上部までの合計距離) が表示されます。ウィンドウは 42px です)。位置 (15,42) で長方形の左上隅を呼び出します。

ただし、タブレットは四角形を描画しますが、画面の左上隅 (位置 (0,0)) から始まる自身のコピーも描画します。「正しい」長方形が重なり、「悪い」長方形の上に表示されます。

これが私がそれをどのように見せたいかのイメージです。

HTMLは次のとおりです。

<div data-role="page" id="makeClouds">
    <div data-role="header">
        <a href="#menu" data-role="button" data-inline="true">Menu</a>
        <h1>Make clouds</h1>
        <a href="#journal" data-role="button" data-inline="true">Journal</a>
    </div>
    <div data-role="content">
        <div id="coverageButtons">
            <a href="#" id="decrease" data-role="button" onclick="decreaseCoverage();" data-inline="true">Less clouds</a>
            <a href="#" id="increase" data-role="button" onclick="increaseCoverage();" data-inline="true">More clouds</a>
            <p id="cloudCoverageDisplay"></p>
        </div>
        <div id="canvasDiv">
            <canvas id="canvasClouds">Sorry, your browser is not supported.</canvas>
        </div>
    </div>
</div> 

これがJavaScriptです：

$(document).delegate("#makeClouds", "pageshow", function() {
console.log("Loading page makeClouds.");
//drawClouds();

var canvas = document.getElementById('canvasClouds');
var context = canvas.getContext('2d');

context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();   
});

CSS は次のとおりです。

#canvasDiv {
    z-index: 2;
}

#canvasClouds {
    background-color: blue;
    z-index: 20;
}

私はここで途方に暮れています。どんな助けでも大歓迎です。