View difference between Paste ID: t89XGAWa and ac5iUsv6

 // we create variables to access key HTML elements in the project
 //we create them as constants because we won't be assigning other values to them anymore
 const choosenPicture = document.querySelector("#select-picture");
 const canvas = document.querySelector("#meme");
 const textTop = document.querySelector("#text-top");
 const textBottom = document.querySelector("#text-bottom");
 const downloadButton = document.querySelector('#download-button');
 //global variable storing our selected image as a URL
 let picture;
 
 //we hide the download button
 downloadButton.style.display='none';
 
 // On the button where we select images we set the so-called event observer whose task will be to monitor each change of this element
 
 // what this means for us is that when we select an image, the code for the event will be executed
 
 // the e(event) parameter passes information about the event and the element
 choosenPicture.addEventListener("change", function (e) {
   // we create a string (URL) that will represent our image object and this will facilitate its use in the code
   // this method takes a file as a parameter, we use the e parameter to return the first picture we selected
   const pictureUrl = URL.createObjectURL(e.target.files[0]);
 
   // this constructor creates a new html element for us - <img>.
   picture = new Image();
   // we set the path to the image
   picture.src = pictureUrl;
 
   // load the image when selected in the canvas
   picture.addEventListener("load", function () {
     // test add information in the console to check if the picture was loaded correctly
     console.log("Loading the image...");
     updateMeme(canvas, picture, textTop.value,textBottom.value);
   });
   downloadButton.style.display='block';
 });
 
 //function responsible for loading the canvas picture and adding the top and bottom caption
 
 function updateMeme(canvas, picture, textTop, textBottom) {
   //set the rendering context in the canvas in our case it will be 2D
   const ctx = canvas.getContext("2d");
   //we set the width and height of the canva to the image parameters
 
   //uploading small images will end up bad quality
   const canvasWidth = picture.width;
   const canvasHeight = picture.height;
   // The font size will depend on the width of the picture if you want to change it, you can edit the value here
   // Math.floor rounds to the smallest or largest integer
 
   const fontSize = Math.floor(canvasWidth / 20);
   // the spacing of the captions from the top and bottom edges of the image the smaller the value, the closer the captions will be to the center
   const offsetY = canvasHeight / 25;
 
   //set the width and height of our canvas to the size of the image
   canvas.width = canvasWidth;
   canvas.height = canvasHeight;
   //this method draws the image in the canvas cord 0 , 0 indicate where to start drawing the left - top corner of the canvas
   ctx.drawImage(picture, 0, 0);
 
   // text preparation https://www.w3schools.com/tags/ref_canvas.asp
 
   // color of letter borders
   ctx.strokeStyle = "black";
   // width of the letter border
   ctx.lineWidth = Math.floor(fontSize / 4);
   //the color of the letter fill
   ctx.fillStyle = "white";
   //centering of the text
   ctx.textAlign = "center";
   //rounding of the border
   ctx.lineJoin = "round";
   ctx.font = `${fontSize}px Summer`;
 
   //setting the top text
   //set the baseline from which we start drawing the text
   ctx.textBaseline = "top";
   //we draw the text without filling
   ctx.strokeText(textTop, canvasWidth / 2, offsetY);
   //we add a fill
   ctx.fillText(textTop, canvasWidth / 2, offsetY);
 
   // prepare the bottom text
   ctx.textBaseline = "bottom";
   ctx.strokeText(textBottom, canvasWidth / 2, canvasHeight - offsetY);
   ctx.fillText(textBottom, canvasWidth / 2, canvasHeight - offsetY);
 }
 
 //for any change in the top text input, we refresh the canvas image
 textTop.addEventListener("change", function () {
   updateMeme(canvas, picture, textTop.value, textBottom.value);
 });
 
 textBottom.addEventListener("change", function () {
   updateMeme(canvas, picture, textTop.value, textBottom.value);
 });
 
 // OPTIONAL button to download image
 // We convert the canvas to an image when the download button is clicked
 downloadButton.addEventListener("click", function() {
 
 
     const dataURL = canvas.toDataURL("image/jpeg");
 
 
    // we create a new <a> tag with the path to our image set,
     const a = document.createElement('a');
     a.href = dataURL;
   // we set the download attribute with the name of the downloaded file
     a.download = 'meme.jpeg';
   // we call the click method on the newly created element as a result the photo will download automatically
     a.click();
 });