Jquery mobile 画布创建自身的副本

我有一个HTML5画布，我正试图在上面画云。在Ripple中测试时，它在Chrome中运行时工作正常，在emulator中运行时工作正常，但在实际设备（10英寸三星Galaxy Tab）上运行时失败

出于测试目的，我注释掉了几乎所有的代码，只在整个画布上画了一个彩色矩形，这样我就可以看到画布的边框。我想在屏幕左上角附近看到一个黄色矩形，左侧有一点空白（大约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> 

下面是CSS：

#canvasDiv {
    z-index: 2;
}

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

---

我在这里不知所措，任何帮助都将不胜感激。

必须在画布（位于div内）上设置“position:absolute”，这就解决了问题

从@AnupChaudhari链接中的详细信息修复。

---

仅供参考，HTML canvas和android的运行情况不太好。最近，我遇到了与此相关的错误。可能是，您遇到了canvas duplication错误。请检查此问题thx的链接，今晚稍后将尝试提及的“修复”。

#canvasDiv {
    z-index: 2;
}

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