title: Canvas drawImage - visible edges of tiles in firefox/opera/ie (not chrome)
body: <p>I'm drawing a game map into canvas. The ground is made of tiles - simple 64x64 png images.</p>
  
  <p>When I draw it in Chrome, it looks ok (left), but when I draw it in Firefox/Opera/IE (right), I get visible edges:
  <img src="https://i.stack.imgur.com/IeZcV.png" alt="enter image description here"></p>
  
  <p>The problem disappears when I use rounded numbers:</p>
  
  <pre><code>ctx.drawImage(img, parseInt(x), parseInt(y), w, h);
  </code></pre>
  
  <p>But that doesn't help when I use scaling:</p>
  
  <pre><code>ctx.scale(scale); // anything from 0.1 to 2.0
  </code></pre>
  
  <p>I also tried these, but no change:</p>
  
  <ol>
  <li><code>ctx.drawImage(img, 5, 5, 50, 50, x, y, w, h); // so not an issue of clamping</code></li>
  <li><code>ctx.imageSmoothingEnabled = false;</code></li>
  <li><code>image-rendering: -moz-crisp-edges; (css)</code></li>
  </ol>
  
  <p>Is there any way to make it work in ff/op/ie? </p>
  
  <hr>
  
  <h3>Edit: Partial solution found</h3>
  
  <p>Adding 1 pixel to width/height and <strong>compensating it by scale</strong> (width+1/scale) seems to help:</p>
  
  <pre><code>ctx.drawImage(props.img, 0, 0, width + 1/scale, height + 1/scale);
  </code></pre>
  
  <p>It makes some artifacts, but I think it's acceptable. On this image, you can see green tiles without edges, and blue windows, which are not compensated, still with visible edges:</p>
  
  <p><img src="https://i.stack.imgur.com/f6FwL.png" alt="fixed"></p>