Basic Image scaling

scale.js

function scaleImage(img, ctx, targetWidth, targetHeight) {
  const widthRatio = targetWidth / img.width;
  const heightRatio = targetHeight / img.height;
  const scale = Math.max(widthRatio, heightRatio);

  let finalWidth = img.width * scale;
  let finalHeight = img.height * scale;

  // calcualte overlap, if any, between final width and contianer with
  // TODO may need to make sure which value is bigger first
  let dx = finalWidth - baseWidth;
  let dy = finalHeight - baseHeight;

  ctx.drawImage(img, -dx / 2, -dy/2, finalWidth, finalHeight);
}

A basic image scaling function for rendering an image onto a canvas and making sure it's scaled and fitted (relatively) properly. Assumes landscape images.

May not work in all situations.