title: canvas drawImage quality
body: <p>Here is a .png image (on the right), and the canvas element which I drew the image on (on the left). Can you notice the quality difference? Canvas renders the image with noticeable quality loss. What can we do?</p>
  
  <p>I observed this result on Chrome and IE9. Others will probably do the same thing.
  How I render the image is quite usual: In the script I create a new <code>Image()</code> object, after it's loaded I call<br>
  <code>context.drawImage(myimage, x, y);</code></p>
  
  <p><img src="https://i.stack.imgur.com/KLSHN.png" alt="Right: What I want, Left: What I get"></p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>This is the initial image i observed on the canvas:<br>
  <img src="https://i.stack.imgur.com/6TGfk.png" alt="In more detail: What I got first"></p>
  
  <p>And here's what the canvas renders after I wrote:<br>
  <code>context.drawImage(myimage,parseInt(x),parseInt(y));</code><br>
  <img src="https://i.stack.imgur.com/NRrMk.png" alt="In more detail: What I get with rounded coordinates"></p>
  
  <p>What can I say, great answer man. Sharpshooting at its best. The hat is off to you.</p>
  
  <p><strong>EDIT2:</strong></p>
  
  <p>I tried <code>context.drawImage(myimage, parseInt(x) + 0.5, parseInt(y)+ 0.5);</code>, here's the result:</p>
  
  <p><img src="https://i.stack.imgur.com/hfRVu.png" alt="In more detail: Worst case"></p>
  
  <p>I think it's worse than the first one. I observed this on chrome, on IE9 it's somewhat same as bad.</p>