How to rotate a canvas so that the previously drawn shapes are also moved with the rotated context

I have this method which tries to rotate the canvas on mouseMove event, while i am able to rotate this there are some shapes which were drawn on the context before

My end goal: i need this canvas to rotate and the drawings, shapes to rotate as well and any subsequent annotations i want to make should be on the rotated shape yet when i hit refresh and rotation is un-done those shapes should be exactly where they were drawn in the rotated context

rotateCanvas = (context, canvas, newCtx, newCanvas) => {
   //canvas and newCanvas are drawn on the same canvas element
   newCanvas.width = canvas.width;
   newCanvas.height = canvas.height;
   newCtx.drawImage(canvas, 0, 0, canvas.width, canvas.height);
   context.clearRect(0, 0, canvas.width + 2, canvas.height + 2);
   context.fillStyle = 'black';
   context.fillRect(0, 0, canvas.width, canvas.height);
   context.translate(canvas.width / 2, canvas.height / 2);
   context.rotate(this.diffAngleRotated);
   context.translate(-canvas.width / 2, -canvas.height / 2);
   context.drawImage(newCanvas, 0, 0, canvas.width, canvas.height);
   context.setTransform(1, 0, 0, 1, 0, 0);
 };

rotated and un-rotated images