scripts/canvas.js

function drawImageMaintainAspectRatio(ctx, image, canvas) {
  // Clear the canvas first
  ctx.fillStyle = '#000'; // or '#fff' for white bars
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // Calculate aspect ratios
  const imageRatio = image.width / image.height;
  const canvasRatio = canvas.width / canvas.height;
  
  let drawWidth, drawHeight, x, y;
  
  if (imageRatio > canvasRatio) {
    // Image is wider than canvas
    drawWidth = canvas.width;
    drawHeight = canvas.width / imageRatio;
    x = 0;
    y = (canvas.height - drawHeight) / 2;
  } else {
    // Image is taller than canvas
    drawHeight = canvas.height;
    drawWidth = canvas.height * imageRatio;
    x = (canvas.width - drawWidth) / 2;
    y = 0;
  }
  
  ctx.drawImage(image, x, y, drawWidth, drawHeight);
}