旋轉帶有圖像和繪圖的 Html Canvas

Question

所以我有一個帶有背景圖像的畫布，上面有一個用戶定義的點/坐標。

我想用圖像和點旋轉整個畫布以保持在完全相同的位置。

我怎么做。

這就是我所擁有的

      var canvas = document.getElementById("car");
      canvas.width = 364;
      canvas.height = 219;
      canvas.style = "border:1px solid red";
      var canvasContext = canvas.getContext("2d");

      const image = "https://i.ibb.co/cYfp8SQ/sedan.jpg";
      let canvasImg = new Image();
      canvasImg.src = image;
      canvasImg.onload = () => {
        canvasContext.drawImage(canvasImg, 0, 0, canvas.width, canvas.height);
      };

      setTimeout(() => {
        canvasContext.fillStyle = "red";
        canvasContext.beginPath();
        canvasContext.arc(110, 80, 5, 0, Math.PI * 2, true);
        canvasContext.fill();
      }, 200);

我已經閱讀了很多關於使用平移和旋轉旋轉的文章，但所有這些文章都帶有繪圖或圖像，而不是兩者兼而有之。

有沒有辦法在保持坐標不變的同時旋轉這個畫布？

我做了一個小提琴參考https://jsfiddle.net/heinrichcoetzee/sjcxdv08/2/

它目前的樣子 ->

我希望它看起來像什么 ->

Answer 1

這是CSS：

canvas {
    transform: rotateZ(90deg);
}

或者在 JS 中：

  const canvas = document.getElementById("car");
  canvas.style.border = "1px solid red";
  canvas.style.transform = "rotateZ(90deg)";