How to draw a rotated object with an offset?

Question

Canvas

Here is a link to an example here is an example

The problem is that I am making a game, and I have an element to rotate an object by degrees. and in my example, when I rotated the 2nd square, the shape of the square itself changed and became at an angle. But in addition to this, when I change the coordinate for example x (shown in the example), then my rotated square does not go along the correct path, HE goes to the side somewhere, and I need the square to change the angle and direction of movement in my example it remained unchanged.

Answer 1

Instead of changing the coordinates in which you draw the object, change the origin of the coordinate system, and do the drawing itself at (0, 0). That is, instead of do , and replace with . context.translate(120, 120);context.translate(120 + x_pos, 120);context.fillRect(x_pos, 0, 100, 100);context.fillRect(0, 0, 100, 100);