<canvas id="canvas"></canvas>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const path = new Path2D();
path.rect(0, 0, 180, 100);

let shouldLoop = true;
function loop () {
  if (shouldLoop) {
    requestAnimationFrame(loop);
  }
  
  draw();
}

function draw () {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.save();

  const [x, y] = getPositions();
  ctx.translate(x, y);

  // Move by half the rectangle size
  ctx.translate(180/2, 100/2);
  // Rotate
  ctx.rotate(getRotation());
  // Move back
  ctx.translate(-180/2, -100/2);

  ctx.fill(path);

  ctx.restore();
}

function getPositions () {
  return [
    50,
    20,
  ];
}

// Return a desired rotation
function getRotation () {
  // 45° angle
  return Math.PI / 4;
}

loop();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.