How to move a rectangle to the top left of another rotated and translated rectangle?

Question

Suppose I have following matrices for Rect1 and Rect2 ,

Rect1 = [
    0.707, 0.707, 0, 0, 
    -0.707, 0.707, 0, 0, 
    0, 0, 1, 0, 
    0, 0, 0, 1
]

Rect2 = [
    0.707, 0.707, 0, 0, 
    -0.707, 0.707, 0, 0, 
    0, 0, 1, 0, 
    200, 200, 0, 1
]

Rect1 and Rect2 are both to 45 degrees. Rect2 is translated to (200, 200) . Rect1 has a height of 20px and width of 20px . Rect2 has a height of 200px and width of 300px .

In a canvas they look like following,

Now, how do I calculate the position for Rect1 to be positioned to the top left of Rect1 so that it looks like following,

Here is the code: https://codesandbox.io/s/hopeful-driscoll-ws8q1

Answer 1

When you rotate both images, the rectangle block becomes approx. 354 x 354 and little square id approx. 28 x 28. So the top tip of the bigger rectangle is displaced by 106px and then add 200px for translation. So its position from left is 306px. Similarly from top it is displaced by -71px and then 200px translation. So it is at 129px. So your smaller rectangle position can bi displaced like this.

const box2Node = {
  node: document.getElementById("box2"),
  matrix: matrixIdentity(),
  height: 20,
  width: 20,
  settings() {
    return [1, angle, [306, 129]];
  }
};