image - canvas drawImage quality

Question

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?

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 Image() object, after it's loaded I call
context.drawImage(myimage, x, y);

EDIT:

This is the initial image i observed on the canvas:

And here's what the canvas renders after I wrote:
context.drawImage(myimage,parseInt(x),parseInt(y));

What can I say, great answer man. Sharpshooting at its best. The hat is off to you.

EDIT2:

I tried context.drawImage(myimage, parseInt(x) + 0.5, parseInt(y)+ 0.5);, here's the result:

I think it's worse than the first one. I observed this on chrome, on IE9 it's somewhat same as bad.

Answer 1

I just created an overlay of both images so that they neutralise each other. It didn't work, I had difficulties with edges.

Please check if your coordinates x, y are integers. Using floating point number here might blur your image as some implementations try to render it "between the pixels"

context.drawImage(myimage, parseInt(x), parseInt(y));

If this doesn't work either, try to use the integer value + 0.5
I know that for OpenGL implementations, you have to use coordinates with 0.5 in order to hit the center of a pixel.

context.drawImage(myimage, parseInt(x)+0.5, parseInt(y)+0.5);

---

EDIT:

Check out this page on Html5Rocks!