How do I rotate an object in canvas and js; my example is not rotating how I expect

Question

I'm trying to rotate a rectangle about it's center but it's not rotating how I expect.

Here's an example:

https://jsfiddle.net/37ur8dfk/1/

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

let x = 100;
let y = 100;
let w = 100;
let h = 50;

// Draw a red dot to highlight the point I want to rotate the rectangle around
ctx.fillStyle = '#ff0000';
ctx.beginPath();
ctx.arc(x, y, 4, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();

// Attempt to rotate the rectangle aroumd x,y
ctx.save();
ctx.fillStyle = '#000000';
ctx.translate(-x, -y);
ctx.rotate(10 * Math.PI/180);
ctx.translate(x, y);
ctx.fillRect(x - w/2, y - h/2, w, h);
ctx.restore();

I have the center of the rectangle as x,y coords. I then translate it by -x,-y to change it's origin to 0,0. Then I rotate it by some degrees, but it does not seem to be rotating about the 0,0 coords. It's my understanding that rotate should rotate the entire context about the origin, or 0,0.

Please take a look at the jsfiddle to see what I mean.

What am I missing here?

Answer 1

You got it inversed.

You are not translating the rectangle, but the context's transformation matrix.
Think of this as a sheet of paper and an arm with pen.

When you translate your context, the arm is moving in the direction provided. When you rotate the context, the arm is rotating.

So to set your rectangle's center as the rotation origin you first need to move the arm so that the pen is in the center of the rectangle, then you'll be able to rotate. And we move back the arm to its initial position so that the x and y coords match.

 const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); let x = 100; let y = 100; let w = 100; let h = 50; // Attempt to rotate the rectangle aroumd x,y ctx.save(); ctx.fillStyle = '#000000'; // move to transformation-origin ctx.translate(x, y); // transform ctx.rotate(10 * Math.PI/180); // go back to where we were ctx.translate(-x, -y); ctx.fillRect(x - w/2, y - h/2, w, h); ctx.restore(); // Draw a red dot to highlight the point I want to rotate the rectangle around ctx.fillStyle = '#ff0000'; ctx.beginPath(); ctx.arc(x, y, 4, 0, 2 * Math.PI); ctx.closePath(); ctx.fill();

 <canvas id="canvas" width="500" height="400"></canvas>

Answer 2

Try (This will allow a rotation around the dot)

 let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); let x = 100; let y = 100; let w = 100; let h = 50; let angle = Math.PI/8; ctx.save(); ctx.fillStyle = '#000000'; ctx.translate(x, y); ctx.rotate(angle); ctx.fillRect(0, 0, w, h); ctx.restore(); ctx.save(); ctx.fillStyle = '#ff0000'; ctx.beginPath(); ctx.arc(x, y, 4, 0, 2 * Math.PI); ctx.closePath(); ctx.fill(); ctx.restore();

 canvas { border: 1px solid black; }

 <canvas id="canvas" width="500" height="400"></canvas>