let loadImageOnCanvasAndThenWriteText = (canvas, imageUrl, textToWrite, textStyleOptions, xCordOfText, yCordOfText) => {
  // 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;

    // Set the canvas to the same size as the image.
    canvas.width = loadedImageWidth;
    canvas.height = loadedImageHeight;

    // Draw the image on to the canvas.
    ctx.drawImage(img, 0, 0);

    // Set all the properties of the text based on the input params
    ctx.font = `${textStyleOptions.fontSize}px ${textStyleOptions.fontFamily}`;
    ctx.fillStyle = textStyleOptions.textColor;
    ctx.textAlign = textStyleOptions.textAlign;
    
    // Setting this so that the postion of the text can be set
    // based on the x and y cord from the top right corner
    ctx.textBaseline = "top";
    
    // Finanlly addeing the text to the image
    ctx.fillText(textToWrite, xCordOfText, yCordOfText);
  };

  // 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";

  let textStyleOptions = {
    fontSize: 30,
    fontFamily: "Arial",
    textColor: "rgba(255, 255, 255, 0.4)",
    textAlign: "left"
  };

  let textToWrite = "© daVinci - Year 1503";

  let xCordOfText = 10;
  let yCordOfText = 10;

  // Load image on the canvas & then write text
  loadImageOnCanvasAndThenWriteText(
    theCanvas,
    imageUrl,
    textToWrite,
    textStyleOptions,
    xCordOfText,
    yCordOfText
  );
});