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 not
I think this link will be help full. I did the same but in my case I give the canvas weight and height dynamically using javascript. Then I gave the height and width to canvas when I declare it. That solve the problem.