画布绘图并不总是在Android webview中呈现

Question

我试图为手机制作一种足球游戏，它利用手机和手机。陀螺机制。我有2个画布：在一个画上场线，另一个是实际的球运动。它在桌面浏览器中工作正常（当然除了陀螺仪部分），但是当我尝试在Android的webview中使用它时，有时我的场线不会被绘制。偶尔球也没有被抽出，但我想解决一个问题可能有助于解决另一个问题。这是我的标记：

<div class="wrap">
    <canvas id="canvasField" height="100%" width="100%"></canvas>
    <div id="icon">image</div>
    <div id="name">name</div>
    <div id="action-container">
        <div id="shake-container">
            <img src="images/score_icon.png" id="shake-icon" />
        </div>
        <div id="score-to-play">Score a goal</div>
    </div>
    <canvas id="canvasPlay" height="568" width="320">Your browser does not support the HTML5 canvas tag.</canvas>
</div>

这是JS：

var canvasField,
    ctx,
    wWidth,
    wHeight,
    topLeftX,
    topLeftY,
    topRightX,
    topRightY,
    bottomLeftX,
    bottomLeftY,
    bottomRightX,
    bottomRightY,
    centerX,
    centerY,
    netImg,
    netX,
    netY,
    hitAreaX,
    hitAreaY,
    icon,
    appName,
    gameInterval,
    info;

/* CONSTANTS */
var marginTop  = 60,
    marginSide = 20,
    netWidth = 175,
    netHeight = 48,
    lineWidth = 6,
    centerCircleRadius = 100,
    ballRadius = 25,
    hitAreaWidth = netWidth-ballRadius,
    hitAreaHeight = lineWidth,
    lineColor = "#ffffff";

window.addEventListener("load", function(){setTimeout(init, 200)});

function init(){
    wWidth = window.innerWidth;
    wHeight = window.innerHeight;
    topLeftX = bottomLeftX = marginSide;
    topLeftY = topRightY = marginTop;
    topRightX = bottomRightX = wWidth - marginSide;
    bottomLeftY = bottomRightY = wHeight - marginSide;
    centerX = wWidth/2;
    centerY = (bottomLeftY-topLeftY)/2+marginTop;
    netX = centerX - netWidth/2;
    netY = marginTop - netHeight;
    hitAreaX = centerX - hitAreaWidth/2;
    hitAreaY = marginTop-hitAreaHeight/2;
    icon = document.getElementById('icon');
    icon.style.top = centerY-icon.offsetHeight/2 + "px";
    icon.style.left = centerX-icon.offsetWidth/2 + "px";
    icon.style.visibility = "visible";
    appName = document.getElementById('name');
    appName.style.top = centerY + centerCircleRadius + 16 + "px";
    appName.style.visibility = "visible";
    info = document.getElementById('info');

    canvasField = document.getElementById('canvasField');
    ctx = canvasField.getContext('2d');
    canvasField.width = wWidth;
    canvasField.height = wHeight;
    drawField();
    //gameInterval = setInterval(frame, 40);

}

function drawField() {
    //info.innerHTML = "drawing";
    ctx.clearRect(0, 0, wWidth, wWidth);

    // DRAWING THE FIELD SIDE LINES
    ctx.lineWidth = lineWidth;
    ctx.lineCap = "square";
    ctx.beginPath();
    ctx.moveTo(topLeftX, topLeftY);
    ctx.lineTo(topRightX, topRightY);
    ctx.lineTo(bottomRightX, bottomRightY);
    ctx.lineTo(bottomLeftX, bottomLeftY);
    ctx.lineTo(topLeftX, topLeftY);
    ctx.strokeStyle = lineColor;
    ctx.stroke();

    //DRAW LEFT CENTRAL LINE
    ctx.beginPath();
    ctx.moveTo(marginSide, centerY);
    ctx.lineTo(centerX-centerCircleRadius, centerY);
    ctx.stroke();

    //DRAW RIGHT CENTRAL LINE
    ctx.beginPath();
    ctx.moveTo(centerX+centerCircleRadius, centerY)
    ctx.lineTo(wWidth-marginSide, centerY);
    ctx.stroke();

    //DRAW CENTRAL CIRCLE
    ctx.beginPath();
    ctx.arc(centerX, centerY, centerCircleRadius, 0, Math.PI * 2);
    ctx.fillStyle = "rgba(180,255,0,0.1)";
    ctx.fill();
    ctx.stroke();

    //DRAW HIT AREA
    ctx.beginPath();
    //ctx.fillStyle = '#F7CA18';
    ctx.fillRect(hitAreaX, hitAreaY, hitAreaWidth, hitAreaHeight);
    ctx.closePath();

    //DRAW NET
    netImg = new Image();
    netImg.onload = function(){
        ctx.drawImage(netImg, netX, netY);
    };
    netImg.src = 'images/net.png';

    //DRAW BARS
    ctx.lineWidth = lineWidth/2;
    ctx.beginPath();
    ctx.moveTo(netX, marginTop);
    ctx.lineTo(netX, netY);
    ctx.lineTo(netX+netWidth, netY);
    ctx.lineTo(netX+netWidth, marginTop);
    ctx.stroke();

}

这里有jsFiddle：http://jsfiddle.net/sbpbeuuo/

可能导致它的原因以及如何解决？