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 + picture.width/2, position + 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.
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
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?