HTML5 rotate image only not the canvas context

Question

Is there a way to rotate an image inside of a canvas? The only thing that I could find are rotating the whole context of the canvas. I would like to rotate images independently on the canvas.

Answer 1

Unfortunately you can't directly rotate an image.

What you can do if you want to display an image of width W and height H at position X,Y rotate with an angle A (in radian) with a pivot in the middle of your image is :

ctx.translate(-X - W / 2, -Y - H / 2);
ctx.rotate(A);
ctx.drawImage(YOUR_IMAGE, 0, 0);
ctx.rotate(-A);
ctx.translate(X + W / 2, Y + H / 2);