Search code examples
javascriptgoogle-chromeipadhtml5-canvasmobile-safari

Why do white lines appear in my canvas when rendered on my iPad (Safari and Chrome)?

I'm updating a canvas one row at a time using JS. On my laptop, the canvas renders as expected. On my iPad, white horizontal lines appear in the canvas at different rows every time I refresh.

If I zoom in or out on my iPad, the lines go away. Any thoughts on why this is happening and how I can work around it? I've tried forcing a repaint of the browser window via several methods mentioned on SO. It didn't change anything.

Here is the code: http://jsfiddle.net/RFf5r/

function paintRow(y)
{

    if(y == 100)
        return;

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var imageData = ctx.createImageData(100, 1);

    var i = 0;
    for(x = 0; x<100; x++)
    {
        imageData.data[i] = x / 100 * 255;
        imageData.data[i+1] = 0;
        imageData.data[i+2] = 0;
        imageData.data[i+3] = 255;
        i+=4
    }

    ctx.putImageData(imageData, 0, y);


    setTimeout(function() { paintRow(y+1); }, 10);
}


paintRow(0);
Solution

  • Here is a workaround that appears to work:

    c.style.zoom = c.style.zoom == "100%" ? "100.0001%" : "100%";

    after each update.