rotating an image without changing its projectory in canvas

Question

I have an image that move on my cavas at a set speed on the X axis. When I try to rotate it his trejectory changes and he no longer move only on the x axis but also on the Y axis. How can I rotate the image and not change its course?

Answer 1

If you control the center of rotation, and perform the calculations according to the book (e.g. use Polar coordinates along the way), it should be fine.

Here is an example of a rotating rectangle that moves with its center of mass along a horizontal line:

class Polygon {
    constructor(points) {
        this.points = points;
        this.center = [0, 0]; // center of rotation & positioning
        this.rotation = 0;
        this.polar = points.map(([x, y]) => [Math.sqrt(x*x + y*y), Math.atan2(y, x)]);
    }
    refresh(ctx) {
        let [x0, y0] = this.center;
        this.points = this.polar.map(([dist, angle]) => {
            angle += this.rotation;
            return [Math.cos(angle) * dist + x0,
                    Math.sin(angle) * dist + y0];
        });
        ctx.beginPath();
        ctx.moveTo(...this.points[0]);
        for (let point of this.points) ctx.lineTo(...point);
        ctx.closePath();
        ctx.stroke();
    }
}

let shape = new Polygon([[-20, -10], [20, -10], [20, 10], [-20, 10]]);
shape.center = [20, 50];
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
requestAnimationFrame(function loop() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    shape.center[0] = (shape.center[0] + 1) % 700;
    shape.rotation += 0.02;
    shape.refresh(ctx);
    requestAnimationFrame(loop);
});

body { margin: 0; padding: 0 }

<canvas width="600" height="170"></canvas>