'Fabric.js: Rotation of rectangle

I'm using this python library streamlit_drawable_canvas to draw rectangles. My main purpose it to have these rectangles in the world coordinates.

I have zero experience with Fabric.js. From their documentation, I understood, that rectangles are rotated around (0,0) by angle. So, rotation of (left, top) by -angle should bring me back to (left, top) prior to rotation.

This is OK:

TL: [101], [51]
rotated with [0.]: [101.] [51.]

This is not:

TL: [96.52], [62.6]
rotated with [-0.22113322]: [107.90008694] [39.90540863]
# expected to be [101], [51]

This is my code:

def rotate(x, y, angle):
    return x * np.cos(angle) - y * np.sin(angle), x * np.sin(angle) + y * np.cos(angle)

My question would be, then, how can I manually rotate the rectangle? (manually means in Python without using Fabric.js functions)

This is my result as a picture enter image description here

and this is my code to reproduce this picture https://share.streamlit.io/chraibi/jupedsim-dashboard/main/draw_lines.py

I feel I'm missing some minor detail. Thank you for any idea.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source