缩放画布并保持中心

.element {
  transform: scale(0.5);
  transform-origin: center center;
}

const element = document.querySelector('.element');
const rect = element.getBoundingClientRect();
const scale = 0.5;

element.style.transform = `scale(${scale})`;
element.style.transformOrigin = `${rect.width / 2}px ${rect.height / 2}px`;

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const image = new Image();

image.src = 'path/to/image.jpg';
image.onload = () => {
  const scale = 0.5;
  const width = image.width * scale;
  const height = image.height * scale;
  const x = (canvas.width - width) / 2;
  const y = (canvas.height - height) / 2;

  ctx.drawImage(image, x, y, width, height);
};