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

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!

IF you are rotating images around their center point, make sure the image itself has an even number of pixels. Once you end up on odd coordinates the image data needs to be interpolated for the target canvas. Apple has some nice documentation on translating and rotating the canvas.

So for any image, as suggested above use rounding to snap to full pixels.

context.translate(Math.floor(img.width/2), Math.floor(img.height/2));

This way every source pixel of your image will always be drawn exactly into a pixel inside the canvas and blurring does not occur. This however is only true for multiples of 90 degrees.

It seems that all browsers do, to some extend, antialiasing in image drawing so you will probably have to provide rotated images as sprites.

According to this Chromium bug report you might be lucky there if they haven't fixed it yet. Read through and you'll learn that Ian Hickson likely opposed making antialiased image drawing optional.

(picture.width/2, picture.height/2) point won't always work.

(Math.floor(picture.width/2) + 0.5, Math.floor(picture.height/2) + 0.5) should help.