Canvas object transformation with mouse?

Question

Canvas

I started to learn canvas and again school geometry, since I skipped it and don’t know it at all.
I am writing my bike similar to fabricjs

Everything turns out, everything works cool, everything is not difficult, except for transformations. I don't understand at all how to describe the logic of changing transformations when I hang events on mouse movement with the controls for scale, transform, skew, rotate held down...

Transformations slow me down, this is the only thing I can't handle.

Please share links to resources, if any, with examples of how to transform objects with the mouse.

For example, I do not understand how much it is necessary to shift translateX, translateY after changing the scale so that the object remains in the original center point. for example:
the initial transform is like this - 1, 0, 0, 1, 0, 0
i set this transform - setTransform(1.5, 0, 0, 1.5, 0, 0)
1.5 is scale, and the last 2 parameters are translateX/
Y it is clear how much you need to change translateX / Y so that the object remains at its center point.

This is just one example, but there is also rotate, for which you also need to change skew, trasnlate ....

I understand that this is difficult, but I want to learn, I'm interested, but I can't find resources where I can study real examples of such handlers.

Answer 1

In addition to geometry, you will need a linear algebra course https://www.youtube.com/playlist?list=PLZHQObOWTQD...

This is just one example, but there is also rotate, for which you also need to change skew, trasnlate ....

All this is done by multiplying the transformation matrices, i.e. matrices are taken: displacement, rotation, scaling, etc. (translateMatrix, rotateMatrix, scaleMatrix) are multiplied:
transformMatrix = translateMatrix * rotateMatrix * scaleMatrix
and the resulting transformMatrix is ​​already used in setTransform()

ps canvas has simple methods for transformation: rotate , translate , etc. with the help of which all this can be done less confused.

Answer 2

I have a question for you)))
I am also making my bike now.
And damn problems.
As you did the transformation correctly, everything leaves me when I change the X axis and the Y axis. The picture leaves more than it should.
And how did you make a stroke around the object, and what would it be possible to stretch the object for it?
If you do not mind sharing, I will be grateful)?
What I sent RAX7 I did, but I still don’t understand how to do the transformation and stroke like in fabric (((