How do I rotate individual shapes on an html5 canvas?

So I am doing a basic Asteroids clone as an intro to HTML5 canvas. I want to be able to rotate the main player while leaving the other objects on screen alone. Currently I am using transform and rotate on the canvas to allow the player to move, which works well.. but since it rotates the entire canvas it affects other shapes on screen. Is the general way to do this, to instead have each shape keep track of its own positions and perform manual transformations on the shape itself while leaving the canvas alone? Can I possibly give my shape a CSS class and control it on its own that way? Should I be using more than 1 canvas so that I can control rotations individually? Not sure what the accepted way is to handle multiple on screen images/shapes all with their own movement and rotation patterns simultaneously. My gut is telling me to have each shape track its own positions and just perform the math on the shape object itself... but then I would not be using the Canvas APIs rotate at all.

My app currently: https://jsfiddle.net/0o2pwLhn/

And a code snippet for the rotation:

// player draw test
function drawShip() {
ctx.beginPath();
ctx.moveTo(shipStartX, shipStartY);
ctx.lineTo(shipStartX + 8, shipStartY + 20);
ctx.lineTo(shipStartX, shipStartY + 15);
ctx.lineTo(shipStartX - 8, shipStartY + 20);
ctx.lineTo(shipStartX, shipStartY);
ctx.translate(shipStartX, shipCenterY);
ctx.rotate((Math.PI / 180) * shipMoveDegree)
ctx.translate(-shipStartX, -shipCenterY);
ctx.stroke();
ctx.closePath();
}


Do the save() and restore() methods on the CanvasRenderingContext2D maybe come into play here? I have tried experimenting with it but havent gotten anywhere. I tried using save() and restore() but the issue is that once I restore, the player just gets set right back to its original spot.. since I am never actually changing its position... just rotating the entire canvas. The similar question here Is it possible to rotate an image on an HTML5 canvas, without rotating the whole canvas? explains how to use save() and rotate() which I think is on the right track.. but does not solve the issue I have because the player location is reset back to the start when the key is lifted, because I set the degrees back to 0 on keyup. How can I maintain the current rotation of a single shape regardless of the rest of the canvas?

• – Jay Jun 5 '19 at 3:10
• Yes I saw that. Problem is it doesnt solve this issue. I can save the state of the canvas, do the rotate, draw, and then restore. But once I get back in this method on the next frame, the coordinates of the player are starting back where they were initialized. I need a way to store the state of the previous rotation in the player so that I do not keep starting over after calling restore() if that makes sense – JParrilla Jun 5 '19 at 11:15
• I don't get how restoring the canvas to the original state would affect the position or rotation of the player. – Bálint Jun 5 '19 at 13:16
• Because I am not actually changing the position of the player, ever. The player coordinates themselves are never being rotated/translated. I am just moving the canvas origin to the center of the player, rotating on that, then returning the canvas back to 0,0. The issue is that everything on the screen also rotates with it. I can solve this by using save() and restore() around the rotation part, but once I restore, everything just goes back to the start. This is the example using save and restore: jsfiddle.net/824getou – JParrilla Jun 5 '19 at 13:46

You should not use the translate method to change the position of the player between frames. Change the shipStartX and shipStartY variables to move the ship and store the current rotation somewhere. This not only gives you a better control over everything, but you won't be able to easily determine collisions with the translate method