# Is it possible to rotate an image on an HTML5 canvas, without rotating the whole canvas?

So I basically want to rotate single sprites on the canvas without rotating the whole canvas, is that someway possible.

I also don't want to create a new canvas for each object I have.

Also, it would be interesting to know which solution is then the most performant.

It’s important to note that changing the co-ordinate system with rotate and translate do not affect anything that’s currently drawn into the canvas. It only affects subsequent drawing actions.

var TO_RADIANS = Math.PI/180;
function drawRotatedImage(image, x, y, angle)
{
// save the current co-ordinate system
// before we screw with it
context.save();

// move to the middle of where we want to draw our image
context.translate(x, y);

// rotate around that point, converting our
// angle from degrees to radians

// draw it up and to the left by half the width
// and height of the image
context.drawImage(image, -(image.width/2), -(image.height/2));

// and restore the co-ords to how they were when we began
context.restore();
}


Change the context, place your image, then reset the context by multiplying your first number by -1.

example:

    context.rotate(k);
context.drawImage(img,c,d,e,f,g,h,i,j);
context.rotate(k * -1)