title: HTML5 Canvas image gets blurred when repeatedly copyied on itself
body: <p>I have this problem with scrolling an tiled image, but only on mobile (android) browsers..</p>
  
  <p>The image is "scrolled" by repainting it on itself, I had a version using an offscreen buffer but no difference. The coordinates are parsed to integers, as the touch events give floats. If this is not done, the effect is even worse. The canvas width/height attr are set equal to the css style width/height so the canvas is not scaled.</p>
  
  <p>When i repeatedly scroll the canvas following touchmove events using the following code, the rendered image gets blurred more and more on mobile chrome browser - not so on desktop browsers.
  See the image attached, the tiles in the middle are the affected, those at the borders get redrawn.</p>
  
  <p>What am I doing wrong? Is there another way of scrolling a canvas?</p>
  
  <pre><code>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&gt;0) {
          this.paintRect(this.ctx, [bounds[0],bounds[1],obounds[0],bounds[3]]);
          x0=obounds[0];
      } else if (dx&lt;0) {
          this.paintRect(this.ctx, [obounds[2],bounds[1],bounds[2],bounds[3]]);
          x1=obounds[2];
      }
      if (dy&gt;0) {
          this.paintRect(this.ctx, [x0,bounds[1],x1,obounds[1]] );
      } else if (dy&lt;0) {
          this.paintRect(this.ctx, [x0,obounds[3],x1,bounds[3]]) ;
      }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/rC9kn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rC9kn.jpg" alt="Screenshot"></a></p>