How to rotate image without rotating the main context in javascript?

Answer 1

Use DOM manipulation with CSS transform's rotateZ().
There is no other way I am aware of.

Answer 2

Just use transform property of CSS.

/*Chose the axis in which you want to rotate*/
transform: rotateX('40deg');
transform: rotateY('40deg');
transform: rotateZ('40deg');

Answer 3

Welcome to the forum.
Next time, try to give more details. Why do you want to rotate the image without rotating the canvas context?

If you want to rotate the entire canvas then css is useful as stated by others (but be careful with your site responsiveness)
If not:
Depending on your needs you might use a preprocessed(already rotated) version of the image or use an off-screen canvas to rotate the image without using the context of the main canvas.

But again, I can't see a good reason to take such complex and unnecessary approaches. context.rotate is all you need

Answer 4

Thanks for clarifying.
Md Saad Akhtar No, it's the worst approach if you want to continuosly rotate something in an animation loop.

Forget about it. ctx.rotate on the main canvas is the way to go. What's wrong with using it? It's definitely the best way. You can turn it back to it's original state, if that's what you are worrying about.

Answer 5

I am making a game in which I want a shield to rotate around the bubble. I think off-screen canvas is a better approach for that.

Answer 6

Can anyone tell me how to use off screen camvas