Translate and Rotate

The context saves state, translates and rotates the coordinate system, draws a card, then restores the original state.

Program

Canvas transforms affect future drawing calls. save and restore keep temporary transforms from leaking into later drawing.

translate_rotate.html

<canvas id="stage" width="360" height="210"></canvas>
<script>
  const ctx = stage.getContext("2d");
  ctx.save();
  ctx.translate(180, 110);
  ctx.rotate(-0.28);
  ctx.fillStyle = "#f59e0b";
  ctx.fillRect(-70, -32, 140, 64);
  ctx.restore();
</script>

translate translate moves the origin for future drawing.

save/restore save and restore bracket temporary drawing state changes.