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

    // 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

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


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


    context.rotate(k * -1)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.