let loadImageOnCanvasAndFitImageToCanvasSize = (canvas, imageUrl) => {
  // Get the 2D Context from the canvas
  let ctx = canvas.getContext("2d");

  // Create a new Image
  let img = new Image();

  // Setting up a function with the code to run after the image is loaded
  img.onload = () => {
    // Once the image is loaded, we will get the width & height of the image
    let loadedImageWidth = img.width;
    let loadedImageHeight = img.height;

    // get the scale
    // it is the min of the 2 ratios
    let scale_factor = Math.min(canvas.width / img.width, canvas.height / img.height);
    
    // Lets get the new width and height based on the scale factor
    let newWidth = img.width * scale_factor;
    let newHeight = img.height * scale_factor;
        
    // get the top left position of the image
    // in order to center the image within the canvas
    let x = (canvas.width / 2) - (newWidth / 2);
    let y = (canvas.height / 2) - (newHeight / 2);
    
    // When drawing the image, we have to scale down the image
    // width and height in order to fit within the canvas
    ctx.drawImage(img, x, y, newWidth, newHeight);
  };

  // Now that we have set up the image "onload" handeler, we can assign
  // an image URL to the image.
  img.src = imageUrl;
};

// Run code after the page is loaded
document.addEventListener("DOMContentLoaded", () => {
  // Setting up the canvas
  let theCanvas = document.getElementById("myCanvas");

  // Some image URL..
  let imageUrl =
    "https://livefiredev.com/wp-content/uploads/2022/08/mona-lisa.jpeg";

  // Load image on the canvas & fit the image to the canvas size
  loadImageOnCanvasAndFitImageToCanvasSize(theCanvas, imageUrl);
});