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

const path = new Path2D();
// Remarque that position is now 0,0 here !
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);

  // Save the state
  ctx.save();

  const [x, y] = getPositions();
  // Move the canvas into position
  ctx.translate(x, y);
  ctx.fill(path);

  // Restore the state
  ctx.restore();
}

// Return the position of the shape
function getPositions () {
  return [
    50,
    20,
  ];
}

loop();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.