HTML5 Canvas图像在重复复制时会变得模糊

Question

我有滚动平铺图像的问题，但仅限于移动（安卓）浏览器..

图像是＆＃34;滚动＆＃34;通过重新绘制它本身，我有一个版本使用屏幕外缓冲区，但没有区别。坐标被解析为整数，因为触摸事件给出了浮点数。如果不这样做，效果会更糟。画布宽度/高度attr设置为等于css样式宽度/高度，因此画布不会缩放。

当我使用以下代码在touchmove事件后反复滚动画布时，渲染的图像在移动Chrome浏览器上越来越模糊 - 在桌面浏览器上则不然。 看到附图中，中间的瓷砖受到影响，边框处的瓷砖重新绘制。

我做错了什么？是否有另一种滚动画布的方法？

worldRenderer.prototype.offset = function(dx,dy) {

    dx = parseInt(dx);
    dy = parseInt(dy)

    this.ctx.drawImage(this.canvas, dx, dy);

    var obounds = this.calcVisible();
    this.options.offsetx += dx;
    this.options.offsety += dy;
    var bounds = this.calcVisible();
    var x0 = bounds[0];
    var x1 = bounds[2];

    if (dx>0) {
        this.paintRect(this.ctx, [bounds[0],bounds[1],obounds[0],bounds[3]]);
        x0=obounds[0];
    } else if (dx<0) {
        this.paintRect(this.ctx, [obounds[2],bounds[1],bounds[2],bounds[3]]);
        x1=obounds[2];
    }
    if (dy>0) {
        this.paintRect(this.ctx, [x0,bounds[1],x1,obounds[1]] );
    } else if (dy<0) {
        this.paintRect(this.ctx, [x0,obounds[3],x1,bounds[3]]) ;
    }
}