The image in <canvas> appears to be bad quality when we scale it down. Apparently it is due to linear interpolation algorithm used by the browser because it is fast.
I also learn that scaling down requires resampling while scaling up requires interpolation.
Searching online, I found pixel perfect resampling algorithm.
http://stackoverflow.com/questions/18922880/html5-canvas-resize-downscale-image-high-quality
I thus ran the image over the algorithm before having the canvas redraw it. It is a good stuff and improve the quality of the image.
