How to understand this code line in this MDN example: Rotating a shape around its center

I came across a canvas example which explains rotating a shape around its center and I found out a code line was hard to understand:

// Matrix transformation
ctx.translate(150, 75);
ctx.rotate(Math.PI / 2);
ctx.translate(-150, -75);

Why the values are these numbers? It’s hard to understand as I can’t see the matrix.

Thank you in advance!

Answer

As I am not familiar with canvas. So I draw some sketches to help to understand.

Now I am more clear and familiar with the canvas stuff.

Step1

enter image description here

Step2

enter image description here

Step3

enter image description here

Step4

enter image description here