Javascript 如何旋转画布，以便先前绘制的形状也随旋转的上下文一起移动

我有一个方法，它尝试在mouseMove事件上旋转画布，而我能够旋转它。之前在上下文中绘制了一些形状

我的最终目标是：我需要这个画布来旋转，并且图形、要旋转的形状以及我想做的任何后续注释都应该在旋转的形状上，但是当我点击“刷新”和“旋转未完成”时，这些形状应该正好在旋转上下文中绘制的位置

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);
 };

---

旋转和未旋转图像

---

您能否创建一个功能代码片段来重现您的问题。。。你应该有办法通过适当的旋转再次清除和绘制所有内容，我认为标签应该保持水平对齐，以便可读