Two transformations at once?

Question

JavaScript

I draw on canvas, I need to apply two transformations of different parameters at once.
Well, let's say two turns at once. Only one around one point (say, the center of the figure), and the second around the second (for example, points 0; 0).
What to do?

Answer 1

Apply transformations sequentially. For example, a rotation transformation around a point is the product of move, turn, and move back:

var tx = -75; var ty = -75;
var a = -Math.PI/8; var c = Math.cos(a); var s = Math.sin(a);
context.transform(1, 0, 0, 1, -tx, -ty);  // translate
context.transform(c, -s, s, c, 0, 0);  // rotate
context.transform(1, 0, 0, 1, tx, ty); // translate

Example : rotation around the center of the red box.