0

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

10th Nov 2020, 8:59 AM
Md Saad Akhtar
Md Saad Akhtar - avatar
6 ответов
+ 5
Use DOM manipulation with CSS transform's rotateZ(). There is no other way I am aware of.
10th Nov 2020, 9:02 AM
Raj Chhatrala
Raj Chhatrala - avatar
+ 5
Just use transform property of CSS. /*Chose the axis in which you want to rotate*/ transform: rotateX('40deg'); transform: rotateY('40deg'); transform: rotateZ('40deg');
10th Nov 2020, 9:08 AM
ツSampriya😘ツ
ツSampriya😘ツ - avatar
+ 4
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
10th Nov 2020, 10:04 AM
Kevin ★
+ 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.
10th Nov 2020, 10:07 PM
Kevin ★
0
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.
10th Nov 2020, 2:12 PM
Md Saad Akhtar
Md Saad Akhtar - avatar
0
Can anyone tell me how to use off screen camvas
10th Nov 2020, 2:12 PM
Md Saad Akhtar
Md Saad Akhtar - avatar