title: How to understand this code line in this MDN example: Rotating a shape around its center
body: <p>I came across a canvas example which explains <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate#rotating_a_shape_around_its_center" rel="nofollow noreferrer">rotating a shape around its center</a> and I found out a code line was hard to understand:</p>
  <pre class="lang-js prettyprint-override"><code>// Matrix transformation
  ctx.translate(150, 75);
  ctx.rotate(Math.PI / 2);
  ctx.translate(-150, -75);
  </code></pre>
  <p>Why the values are these numbers? It's hard to understand as I can't see the matrix.</p>
  <p>Thank you in advance!</p>