CODEWITHSUNDEEP
javascriptcanvasrotation
Vaaljan
Vaaljan

Reputation: 832

Rotate Html Canvas with image and drawing

So I have a canvas with a background image that has a user defined dot / coordinate on it.

I want to rotate the entire canvas with the image and the dot to stay in exactly the same place.

How do I do that.

This is what I have

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

I have read a bunch of articles about rotating with translate and rotate, but all of them is with either a drawing, or an image, not both.

Is there a way to rotate this canvas while keeping the coordinate intact?

I made a fiddle to reference https://jsfiddle.net/heinrichcoetzee/sjcxdv08/2/

What it currently looks like -> enter image description here

What I want it to look like ->

enter image description here

Upvotes: 0

Views: 374

Answers (1)

Dor-Ron
Dor-Ron

Reputation: 1807

Here's the CSS:

canvas {
    transform: rotateZ(90deg);
}

Or in JS:

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

Upvotes: 1

Related Questions