Why do images lose quality after the context has been rotated?

Question

I'm making a top-down shooter game that relies on the avatar always being rotated pointing to the mouse cursor. I achieve rotation like this:

//Rendering. context.save(); //Save the context state, we're about to change it a lot.  context.translate(position[0] + picture.width/2, position[1] + picture.height/2); //Translate the context to the center of the image. context.rotate(phi); //Rotate the context by the object's phi. context.drawImage(picture.image, -picture.width/2, -picture.height/2); //Draw the image at the appropriate position (center of the image = [0, 0]).  context.restore(); //Get the state back. 

When the phi is zero, the image is rendered in its normal quality, with sharp edges and detectable pixels. But, when I set the phi to a nonzero value (actually, when it's not 0, Pi/2, Pi, Pi+Pi/2 or 2Pi), the image looses it's sharpness and the individual pixels can't be seen anymore, because they are blurred out.

Here's a screenshot (sorry about the general bad quality of the screenshot, but I think that the difference is more than noticeable):

This is, well, a bit unacceptable. I can't have the images always blurred out! Why is this happening and can I solve it?

Answer 1

You could try

context.imageSmoothingEnabled = false; 

See docs:

context.imageSmoothingEnabled [ = value ]

Returns whether pattern fills and the drawImage() method will attempt to smooth images if they have to rescale them (as opposed to just rendering the images with "big pixels").

Can be set, to change whether images are smoothed (true) or not (false).

If you want a true pixel-art retro style effect, you'd need to manually create rotated sprite images for several angles, look up the appropriate sprite for the current value of phi, and draw it without rotation. This obviously requires a fair amount of art work!