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

Question

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.

Answer 1

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 
    context.rotate(angle * 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(); 
}

Source: http://creativejs.com/2012/01/day-10-drawing-rotated-images-into-canvas/

Answer 2

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)