[Solved] How to rotate one object at another (slowly)

by


This question is quite unclear. But, I’m assuming you essentially just want to rotate an element around an arbitrary point on a HTML5 canvas.

On a canvas, you can only draw one element at a time. You can’t really manipulate singular elements – for example, you can’t rotate an element by itself. Instead, you’d need to rotate the entire canvas. This will always rotate around the centre of the canvas, but if you move the canvas origin, then you will draw on a different part of the canvas; thus allowing you to rotate around a point.

Check out the following example. You can click anywhere on the canvas to make the square rotate around that point. Hopefully this is what you are after:

let cv = document.getElementById("cv");
let ctx = cv.getContext("2d");
let angle = 0;

//Variables you can change:
let speed = 1; //Degrees to rotate per frame
let pointX = 250; //The x-coord to rotate around
let pointY = 250; //The y-coord to rotate around

ctx.fillStyle = "#000";

setInterval(()=>{ //This code runs every 40ms; so that the animation looks smooth
  angle = (angle + speed) % 360; //Increment the angle. Bigger changes here mean that the element will rotate faster. If we go over 360deg, reset back to 0.
  
  ctx.clearRect(0, 0, 400, 400); //Clear away the previous frame.
  
  //Draw the point we are rotating around
  ctx.beginPath();
  ctx.arc(pointX,pointY,5,0,2*Math.PI);
  ctx.fill();
  ctx.closePath();
  
  ctx.save(); //Save the state before we transform and rotate the canvas; so we can go back to the unrotated canvas for the next frame
  
  ctx.translate(pointX, pointY); //Move the origin (0, 0) point of the canvas to the point to rotate around. The canvas always rotates around the origin; so this will allow us to rotate around that point
  ctx.rotate(angle*Math.PI/180); //Rotate the canvas by the current angle. You can use your Math.degrees function to convert between rads / degs here.
  
  ctx.fillStyle = "#f00"; //Draw in red. This is also restored when ctx.restore() is called; hence the point will always be black; and the square will always be red.
  
  ctx.fillRect(0, 0, 50, 50); //Draw the item we want rotated. You can draw anything here; I just draw a square.
  
  ctx.restore(); //Restore the canvas state
  
}, 40);





//Boring event handler stuff
//Move the point to where the user clicked
//Not too robust; relys on the body padding not changing
//Really just for the demo


cv.addEventListener("click", (event)=>{
    pointX = event.clientX - 10;
    pointY = event.clientY - 10;
});
#cv {
  border:solid 1px #000; /*Just so we can see the bounds of the canvas*/
  padding:0;
  margin:0;
}

body {
  padding:10px;
  margin:0;
}
<canvas id="cv" width="400" height="400"></canvas><br>
Click on the canvas above to make the rectangle rotate around the point that was clicked.

3

solved How to rotate one object at another (slowly)