Helper function to draw bitmap image on html canvas (centered, preserved aspect ratio)

drawImageScaled.js

function drawImageScaled({ context, image }) {
  const canvas = context.canvas
  const hRatio = canvas.width / image.width
  const vRatio = canvas.height / image.height
  const ratio = Math.min(hRatio, vRatio)
  const centerShift_x = (canvas.width - image.width * ratio) / 2
  const centerShift_y = (canvas.height - image.height * ratio) / 2

  context.clearRect(0, 0, canvas.width, canvas.height)
  context.drawImage(
    image,
    0,
    0,
    image.width,
    image.height,
    centerShift_x,
    centerShift_y,
    image.width * ratio,
    image.height * ratio,
  )
}

export default drawImageScaled