Как выполнять центрирование изображения при масштабировании?

Question

[Богдан]

Как правильно центрировать изображение при масштабировании, а то как-то оно не очень по центру. Скорее всего тут школьный курс геометрии, но что-то никак не могу вспомнить как сделать.

function renderImage(canvas, scale) { 
 const context = canvas.getContext('2d');
 const canvasSize = canvas.clientWidth;
 const centerSize = canvasSize/2;
 canvas.width = canvasSize;
 canvas.height = canvasSize;
   
 const scaleKoef = (10 + scale) / 10;
 const scaleSize = canvasSize / scaleKoef;
 
  // Центрируем изображение
 const centerX = (image.width * scaleKoef / 2 - centerSize) ;
 const centerY = (image.height * scaleKoef / 2 - centerSize) ;
 
 context.drawImage(
  image, 
  centerX, centerY, scaleSize, scaleSize,
  0, 0, canvasSize, canvasSize
 );
}

Answer 1

[0xD34F]

Так?

Comments

[Богдан]

Спасибо, но вот смотрите, когда изображение не квадратное, уже совсем другой результат

[Богдан]

Artem iDev, почему-то не вставиля в посте Codepen. Тут как бы и отдельный ratio

function renderImage(canvas, scale) { 
  const context = canvas.getContext('2d');
  const canvasSize = canvas.clientWidth;
  canvas.width = canvasSize;
  canvas.height = canvasSize;
   
  const ratio = (10 + scale) / 10;

  const scaledImageWidth = image.width * ratio;
  const scaledImageHeight = image.height * ratio;

  const startX = (canvas.clientWidth - scaledImageWidth) / 2;
  const startY = (canvas.clientHeight - scaledImageHeight) / 2;

  context.drawImage(
    image, 
    0, 0,
    image.width, image.height,
    startX, startY,
    scaledImageWidth, scaledImageWidth
  );
}

Демка

[0xD34F]

Богдан, поправил.

[Богдан]

0xD34F, Спасибо, а где посмотреть результат?

[0xD34F]

Богдан, от меня тут есть ровно одна ссылка. Интересно, к чему может относится слово "поправил"? ЗАГАДКА ВЕКА.

[Богдан]

0xD34F, Спасибо за помощь